/*
 * Concept A, the site design. layouts/app.blade.php loads it after the four
 * older stylesheets on every page that sets a design (public, payment,
 * cabinet shell and wizard); every rule is scoped to body.ca-page, so the
 * admin never sees it. Most content rules skip the cabinet shell through
 * :where(:not(.ca-shell)), but shared pieces (kicker, logo tile, offer card)
 * reach the cabinet and wizard on purpose. Several older rules use
 * !important; the overrides below that need it say so.
 */

/* ---------- tokens ---------- */
.ca-page {
    --ca-g: #2e7d32;
    --ca-g-strong: #1b5e20;
    --ca-g-deep: #14471a;
    --ca-g-night: #0d3312;
    --ca-g-50: #f3f8f3;
    --ca-g-100: #e6f1e7;
    --ca-g-200: #cfe4d0;
    --ca-g-300: #a9cfab;
    --ca-g-mint: #b9e4bc;
    /* Focus ring on light surfaces: 8.0:1 on #fff, 7.4:1 on #f3f8f3 (WCAG 2.4.11 needs 3:1).
       The mint ring is kept for the dark green header, footer and hero copy. */
    --ca-focus: #1b5e20;
    --ca-ink: #0f1a12;
    --ca-body: #4a5a4e;
    --ca-muted:#5b6a5f;
    --ca-placeholder:#6b7a6f;
    --ca-line: #e3e9e4;
    --ca-line-2: #d4ddd6;
    --ca-on-dark: rgba(255, 255, 255, .86);
    --ca-on-dark-soft: rgba(255, 255, 255, .78);
    --ca-danger: #b3261e;
    --ca-danger-ink: #8c1d18;
    --ca-r: 14px;
    --ca-r-lg: 20px;
    --ca-r-xl: 28px;
    --ca-sh-1: 0 1px 2px rgba(15, 26, 18, .06), 0 1px 1px rgba(15, 26, 18, .04);
    --ca-sh-2: 0 1px 2px rgba(15, 26, 18, .05), 0 4px 12px -2px rgba(15, 26, 18, .08);
    --ca-sh-3: 0 2px 4px rgba(15, 26, 18, .04), 0 12px 24px -6px rgba(15, 26, 18, .10), 0 32px 64px -16px rgba(20, 71, 26, .22);
    --ca-max: 1200px;
    --ca-sec-y: 96px;

    /* green-theme.css sets the body background from this with !important. */
    --bg-cabinet: var(--ca-g-50);
}

/* Cabinet pages (body.ca-shell) style their content in concept-a-cabinet.css;
   the public content rules below skip them through :where(:not(.ca-shell)). */
.ca-page:where(:not(.ca-shell)) {
    /* green-theme.css paints every .btn-success and submit from these roles
       (blue by default). Concept A pages use one brand-green primary. */
    --action-primary: var(--ca-g);
    --action-primary-hover: var(--ca-g-strong);
    --action-primary-active: var(--ca-g-deep);
    --action-brand: var(--ca-g);
    --action-brand-hover: var(--ca-g-strong);
    --action-brand-active: var(--ca-g-deep);
}

/* A column, so on short pages the footer grows to the bottom of the
   window instead of leaving a strip of page background under it. */
body.ca-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body.ca-page:where(:not(.ca-shell)),
.ca-page.ca-shell .ca-header,
.ca-page.ca-shell .ca-footer {
    font-family: Inter, "Inter Fallback", "Inter Fallback Roboto", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--ca-body);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "cv11", "ss01";
}

body.ca-page:where(:not(.ca-shell)) {
    background: #fff;
}

.ca-page:where(:not(.ca-shell)) h1,
.ca-page:where(:not(.ca-shell)) h2,
.ca-page:where(:not(.ca-shell)) h3 {
    color: var(--ca-ink);
    letter-spacing: -.02em;
}

/* green-theme.css forces its own outline and box-shadow with !important on
   .btn and .form-control, so the ring is !important here. The 2px gap puts a
   ring around a green button on the light page, not on the button. */
.ca-page:where(:not(.ca-shell)) :focus-visible {
    outline: 3px solid var(--ca-focus) !important;
    outline-offset: 2px !important;
}

/* The unchecked label is what a visually hidden .btn-check shows. */
.ca-page:where(:not(.ca-shell)) .btn-check:focus-visible + .btn {
    outline: 3px solid var(--ca-focus) !important;
    outline-offset: 2px !important;
}

/* Dark green surfaces keep the mint ring (7.6:1 on the header green). */
.ca-page .ca-header :focus-visible,
.ca-page .ca-footer :focus-visible,
.ca-page .ca-hero-copy :focus-visible,
.ca-page .ca-track-aside :focus-visible {
    outline: 3px solid var(--ca-g-mint) !important;
    outline-offset: 2px !important;
}

/* The skip link shows at the top-left corner over the header green, so an
   outside ring would sit off screen or on the same green. Inset white ring
   on its own #2e7d32 box: 5.1:1. */
.ca-page .skip-to-content:focus-visible {
    outline: 3px solid #fff !important;
    outline-offset: -6px !important;
}

/* main is only ever focused by the skip link or a click (tabindex="-1"), so it
   takes no ring; the skip link moves the reading position there. */
.ca-page main#main:focus,
.ca-page main#main:focus-visible {
    outline: none !important;
}

/* The header menus open onto a light panel inside the dark header. */
.ca-page .ca-header .dropdown-menu :focus-visible {
    outline: 3px solid var(--ca-focus) !important;
    outline-offset: 2px !important;
}

/* green-theme.css pins .container to 1400px with !important. */
.ca-page .ca-container {
    max-width: var(--ca-max) !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.ca-page:where(:not(.ca-shell)) section {
    scroll-margin-top: 24px;
}

/* style.css gives main a 550px minimum and 50px margins, which left a
   large empty band above the footer on every short page. */
.ca-page:where(:not(.ca-shell)) main {
    margin: 0;
    min-height: 0;
    padding: 40px 0 72px;
}

.ca-page:where(:not(.ca-shell)) main:has(> .ca-hero) {
    padding: 0;
    background: #fff;
}

/* ---------- buttons ---------- */
.ca-page .ca-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .18s, color .18s, border-color .18s, box-shadow .18s, transform .18s;
}

/* The :not(#ca-x) lifts these above green-theme's long
   button[type="submit"]:not(...) chain, which forces a blue shadow and its
   own radius with !important. */
.ca-page .ca-btn-primary:not(#ca-x) {
    background: var(--ca-g) !important;
    border-color: var(--ca-g) !important;
    color: #fff !important;
    border-radius: 12px !important;
    min-height: 44px !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 1px 2px rgba(15, 26, 18, .2), 0 6px 16px -6px rgba(46, 125, 50, .55) !important;
}

.ca-page .ca-btn-primary:not(#ca-x):hover {
    background: var(--ca-g-strong) !important;
    border-color: var(--ca-g-strong) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
}

.ca-page .ca-btn-white {
    background: #fff;
    color: var(--ca-g-deep);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 8px 20px -8px rgba(0, 0, 0, .35);
}

.ca-page .ca-btn-white:hover {
    background: var(--ca-g-50);
    color: var(--ca-g-deep);
    transform: translateY(-1px);
}

/* The one secondary button: outlined, transparent, taking its colour from
   the surface it sits on (ink on light, white in the green header). */
.ca-page .ca-btn-secondary {
    background: #fff;
    border-color: var(--ca-line-2);
    color: var(--ca-ink);
}

.ca-page .ca-btn-secondary:hover {
    border-color: var(--ca-g);
    color: var(--ca-g-strong);
}

.ca-page .ca-header .ca-btn-secondary {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .34);
    color: #fff;
}

.ca-page .ca-header .ca-btn-secondary:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .55);
    color: #fff;
}

.ca-page .ca-btn-text {
    padding: 0 12px;
    color: var(--ca-on-dark);
}

.ca-page .ca-btn-text:hover {
    color: #fff;
    background: rgba(255, 255, 255, .08);
}

.ca-page .ca-btn-lg {
    height: 56px;
    padding: 0 24px;
    font-size: 16px;
    border-radius: var(--ca-r);
}

.ca-page .ca-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ---------- header ---------- */
.ca-page .ca-header {
    position: relative;
    z-index: 1031;
    background: var(--ca-g-strong);
    color: #fff;
}

/* green-theme.css gives every .navbar a grey border and shadow. */
.ca-page .ca-nav {
    padding: 18px 0;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

.ca-page .ca-nav > .ca-container {
    flex-wrap: wrap;
}

.ca-page .ca-brand {
    padding: 0;
    margin-right: 16px;
}

/* The wordmark PNG (713x174, sharp at 3x) has transparent margins; the box
   crops them the way a.html does. */
.ca-page .ca-brand-crop {
    display: block;
    overflow: hidden;
    width: 143px;
    height: 44px;
}

.ca-page .ca-brand-crop img {
    display: block;
    width: 213px;
    height: 52px;
    max-width: none;
    margin: -5px 0 0 -34px;
}

.ca-page .ca-toggler {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .05);
    color: #fff;
    font-size: 18px;
}

.ca-page .ca-toggler:focus {
    box-shadow: none;
}

.ca-page .ca-nav-links {
    gap: 2px;
}

.ca-page .ca-nav-links .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 0;
    border-radius: 10px;
    color: var(--ca-on-dark);
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    transition: color .15s, background-color .15s;
}

.ca-page .ca-nav-links .nav-link:hover,
.ca-page .ca-nav-links .nav-link:focus-visible,
.ca-page .ca-nav-links .nav-link.show {
    color: #fff;
    background: rgba(255, 255, 255, .08);
}

.ca-page .ca-nav-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ca-page .ca-lang {
    display: flex;
    padding: 3px;
    border-radius: 10px;
    background: rgba(0, 0, 0, .18);
    border: 1px solid rgba(255, 255, 255, .14);
}

.ca-page .ca-lang a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 28px;
    padding: 0 9px;
    border-radius: 7px;
    color: var(--ca-on-dark);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-decoration: none;
}

.ca-page .ca-lang a:hover {
    color: #fff;
}

.ca-page .ca-lang a[aria-current="true"] {
    background: #fff;
    color: var(--ca-g-deep);
}

.ca-page .ca-header .dropdown-menu {
    padding: 6px;
    border: 1px solid var(--ca-line);
    border-radius: var(--ca-r);
    box-shadow: var(--ca-sh-3);
}

.ca-page .ca-header .dropdown-item {
    padding: 9px 12px;
    border-radius: 9px;
    color: var(--ca-ink);
    font-size: 15px;
    font-weight: 500;
}

.ca-page .ca-header .dropdown-item i {
    color: var(--ca-g);
}

.ca-page .ca-header .dropdown-item:hover,
.ca-page .ca-header .dropdown-item:focus {
    background: var(--ca-g-50);
    color: var(--ca-g-deep);
}

@media (min-width: 992px) {
    .ca-page .ca-nav .navbar-collapse {
        justify-content: space-between;
    }
}

/* The header shows in full from lg, but the Russian labels are the longest
   and do not fit the 1200px container at the xl sizes, so the links, the
   language switcher and the buttons step down a size from 992 up. */
@media (min-width: 992px) {
    .ca-page .ca-nav-links .nav-link {
        padding: 8px 10px;
        font-size: 14px;
    }

    .ca-page .ca-header .ca-btn {
        padding: 0 14px;
        font-size: 14px;
    }

    .ca-page .ca-lang a {
        padding: 0 8px;
    }
}

/* Between lg and xl there is less room to the 1200px container edge, so
   the same items tighten one more step rather than wrap. */
@media (min-width: 992px) and (max-width: 1279.98px) {
    .ca-page .ca-nav > .ca-container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .ca-page .ca-brand {
        margin-right: 6px;
    }

    .ca-page .ca-nav-right {
        gap: 4px;
    }

    .ca-page .ca-nav-links .nav-link {
        padding: 8px 5px;
        font-size: 13px;
    }

    .ca-page .ca-header .ca-btn {
        padding: 0 6px;
        font-size: 13px;
    }

    .ca-page .ca-lang a {
        padding: 0 4px;
        font-size: 11px;
    }
}

/* Below lg the links, languages, account and CTA open as one panel. */
@media (max-width: 991.98px) {
    .ca-page .ca-nav {
        padding: 12px 0;
    }

    .ca-page .ca-nav .navbar-collapse {
        margin: 0 -8px;
    }

    .ca-page .ca-nav .navbar-collapse > * {
        padding: 0 8px;
    }

    .ca-page .ca-nav-links {
        margin-top: 12px;
        padding-top: 8px !important;
        border-top: 1px solid rgba(255, 255, 255, .14);
    }

    .ca-page .ca-nav-links .nav-link {
        display: flex;
        padding: 12px;
    }

    .ca-page .ca-nav-links .dropdown-menu {
        margin-bottom: 8px;
    }

    .ca-page .ca-nav-right {
        flex-wrap: wrap;
        padding: 12px 8px 20px !important;
    }

    .ca-page .ca-nav-right .ca-lang {
        flex: 0 0 100%;
        justify-content: center;
        margin-bottom: 4px;
    }

    .ca-page .ca-nav-right .ca-lang a {
        flex: 1;
        justify-content: center;
        height: 44px;
    }

    .ca-page .ca-nav-right > .ca-btn,
    .ca-page .ca-nav-right > .ca-account {
        flex: 1 1 40%;
    }

    .ca-page .ca-nav-right > .ca-account > .ca-btn {
        width: 100%;
    }

    .ca-page .ca-nav-right > .send-parcel-cta {
        flex: 0 0 100%;
        height: 48px;
    }
}

/* The sticky bottom bar from the old header, restyled. */
.ca-page .mobile-cta-bar {
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96);
    border-top: 1px solid var(--ca-line);
    box-shadow: 0 -8px 24px -12px rgba(15, 26, 18, .25);
    backdrop-filter: blur(8px);
    transition: transform .2s ease, visibility 0s linear 0s;
}

/* concept-a.js tucks the bar away while the quote card, the footer or the
   open menu is on screen, where it would cover them or repeat their CTA.
   Hidden, not only moved, so its link leaves the tab order too. */
.ca-page .mobile-cta-bar.is-tucked {
    visibility: hidden;
    transform: translateY(100%);
    transition: transform .2s ease, visibility 0s linear .2s;
}

@media (prefers-reduced-motion: reduce) {
    .ca-page .mobile-cta-bar,
    .ca-page .mobile-cta-bar.is-tucked {
        transition: none;
    }
}

.ca-page .mobile-cta-bar .btn.btn-primary.prld {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 52px;
    border-radius: var(--ca-r) !important;
    font-weight: 600 !important;
    box-shadow: 0 6px 16px -6px rgba(46, 125, 50, .55) !important;
}

/* ---------- hero ---------- */
.ca-page .ca-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #fff;
    background: var(--ca-g-deep);
}

/* The top edge matches the header's solid green so the two read as one. */
.ca-page .ca-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(900px 600px at 12% 8%, rgba(76, 160, 82, .45), transparent 60%),
        radial-gradient(700px 520px at 88% 30%, rgba(46, 125, 50, .85), transparent 62%),
        radial-gradient(800px 500px at 60% 120%, rgba(13, 51, 18, .95), transparent 60%),
        linear-gradient(180deg, #1b5e20 0%, #14471a 55%, #0f3a15 100%);
}

.ca-page .ca-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .5;
    background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 30% 30%, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 30% 30%, #000 20%, transparent 75%);
}

.ca-page .ca-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    grid-template-areas: "copy form" "more form";
    column-gap: 64px;
    align-items: center;
    padding-top: 48px;
    padding-bottom: 104px;
}

.ca-page .ca-hero-copy {
    grid-area: copy;
    align-self: end;
}

.ca-page .ca-hero-more {
    grid-area: more;
    align-self: start;
}

.ca-page .ca-quote {
    grid-area: form;
}

.ca-page .ca-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    backdrop-filter: blur(6px);
    transition: background-color .15s;
}

.ca-page .ca-eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ca-g-mint);
}

.ca-page .ca-eyebrow i {
    font-size: 11px;
}

.ca-page .ca-eyebrow:hover {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

.ca-page .ca-hero h1 {
    margin: 24px 0 20px;
    color: #fff;
    font-size: clamp(38px, 5vw, 62px) !important;
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.035em;
    text-wrap: balance;
    /* At large text sizes a long word ("kurjerpasta") is wider than the
       column; break it rather than clip it at the viewport edge. */
    overflow-wrap: anywhere;
}

/* Headings and doc rows never run past the column at large text sizes. */
.ca-page :where(h1, h2, h3, h4, .ca-doc-h b) {
    overflow-wrap: break-word;
}

.ca-page .ca-hero-copy > h1:first-child {
    margin-top: 0;
}

.ca-page .ca-hero h1 em {
    font-style: normal;
    background: linear-gradient(90deg, #d9f2da, #b9e4bc);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ca-page .ca-lede {
    max-width: 540px;
    margin: 0;
    color: var(--ca-on-dark);
    font-size: clamp(17px, 1.5vw, 19px);
    line-height: 1.6;
}

.ca-page .ca-checks {
    display: grid;
    gap: 14px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}

.ca-page .ca-checks li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.ca-page .ca-check-ic {
    flex: none;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin-top: 1px;
    border-radius: 9px;
    background: rgba(185, 228, 188, .16);
    border: 1px solid rgba(185, 228, 188, .28);
    color: var(--ca-g-mint);
    font-size: 12px;
}

.ca-page .ca-checks strong {
    color: #fff;
    font-weight: 600;
}

.ca-page .ca-checks span {
    color: var(--ca-on-dark-soft);
}

/* The van sits between the checks and the carriers, scaled to the column. */
.ca-page .ca-hero-art {
    display: block;
    width: min(100%, 400px);
    margin-top: 24px;
}

.ca-page .ca-hero-art img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .3));
}

.ca-page .ca-carriers {
    margin-top: 40px;
}

.ca-page .ca-hero-art + .ca-carriers {
    margin-top: 16px;
}

.ca-page .ca-carriers p {
    margin: 0 0 14px;
    color: var(--ca-on-dark-soft);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ca-page .ca-logo-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* One white tile for every carrier logo: the hero strip, the offer card and
   the info modal. Full-bleed marks (DHL, Venipak) sit contained inside the
   same padding as the rest. A text-only tile shows the carrier name. */
.ca-page .ca-logo-tile {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 48px;
    padding: 7px;
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 6px 14px -8px rgba(0, 0, 0, .45);
    color: var(--ca-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    transition: transform .18s;
}

.ca-page .ca-carriers .ca-logo-tile:hover {
    transform: translateY(-2px);
}

.ca-page .ca-logo-tile img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ca-page .ca-logo-label {
    display: none;
}

.ca-page .offer .ca-logo-tile,
.ca-page .ca-om .ca-logo-tile {
    border: 1px solid var(--ca-line);
    box-shadow: none;
}

/* ---------- quote card ---------- */
.ca-page .ca-quote {
    position: relative;
    padding: 28px;
    border-radius: var(--ca-r-xl);
    background: #fff;
    color: var(--ca-body);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .4), 0 30px 80px -20px rgba(0, 0, 0, .5), 0 12px 24px -12px rgba(0, 0, 0, .3);
    scroll-margin-top: 24px;
}

.ca-page .ca-quote::before {
    content: "";
    position: absolute;
    inset: -10px;
    z-index: -1;
    border-radius: 34px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
}

.ca-page .ca-quote.quote-highlight {
    box-shadow: 0 0 0 4px var(--ca-g-mint), 0 30px 80px -20px rgba(0, 0, 0, .5);
}

.ca-page .ca-quote-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.ca-page .ca-quote-head h2 {
    margin: 0;
    font-size: 20px !important;
    font-weight: 700;
}

.ca-page .ca-quote-head small {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ca-muted);
    font-size: 13px;
}

.ca-page .ca-quote-head small i {
    color: var(--ca-g);
}

/* .form-group label in the older sheets is !important on phones. */
.ca-page .ca-quote .ca-label {
    display: block;
    height: auto;
    margin: 0 0 8px !important;
    color: var(--ca-ink) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
}

.ca-page .ca-seg {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border-radius: var(--ca-r);
    background: var(--ca-g-50);
    border: 1px solid var(--ca-line);
}

.ca-page .ca-seg button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    min-height: 64px;
    padding: 8px 6px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ca-body);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    overflow-wrap: anywhere;
    hyphens: auto;
    cursor: pointer;
    transition: background-color .15s, color .15s, box-shadow .15s;
}

/* The pictures have a white ground; multiply lets the tray show through. */
.ca-page .ca-seg button img {
    flex: none;
    width: 40px;
    height: 40px;
    mix-blend-mode: multiply;
}

.ca-page .ca-seg button:hover {
    color: var(--ca-ink);
}

.ca-page .ca-seg button[aria-pressed="true"] {
    background: #fff;
    color: var(--ca-g-deep);
    box-shadow: var(--ca-sh-2), 0 0 0 1px rgba(46, 125, 50, .25);
}

.ca-page .ca-native-select {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.ca-page .ca-row {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.ca-page .ca-row-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ca-page .ca-row-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ca-page .ca-field {
    position: relative;
    min-width: 0;
    margin: 0;
}

.ca-page .ca-input {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--ca-line-2);
    border-radius: 12px;
    background-color: #fff;
    color: var(--ca-ink);
    font: inherit;
    font-size: 16px;
    transition: border-color .15s, box-shadow .15s;
    -webkit-appearance: none;
    appearance: none;
}

.ca-page .ca-input::placeholder,
.ca-page .ca-input:focus::placeholder {
    color: var(--ca-placeholder);
    font-style: normal;
    opacity: 1;
}

.ca-page .ca-input:hover {
    border-color: #b9c6bc;
}

.ca-page .ca-input:focus {
    outline: none;
    border-color: var(--ca-g);
    box-shadow: 0 0 0 4px rgba(46, 125, 50, .14);
}

.ca-page select.ca-input {
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%234a5a4e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    text-overflow: ellipsis;
}

.ca-page .ca-has-unit {
    position: relative;
}

.ca-page .ca-has-unit .ca-input {
    padding-right: 40px;
}

.ca-page .ca-unit {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ca-muted);
    font-size: 13px;
    font-weight: 500;
    pointer-events: none;
}

.ca-page .ca-quote .form-error-special {
    margin-bottom: 6px;
}

.ca-page .ca-route {
    position: relative;
    margin-top: 20px;
    padding: 16px;
    border: 1px solid var(--ca-line);
    border-radius: 16px;
    background: linear-gradient(180deg, #fbfdfb, #f6faf6);
}

.ca-page .ca-leg + .ca-swap + .ca-leg {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--ca-line-2);
}

.ca-page .ca-leg-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: var(--ca-ink);
    font-size: 13px;
    font-weight: 600;
}

.ca-page .ca-leg-dot {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: var(--ca-g-100);
    color: var(--ca-g-strong);
    font-size: 11px;
}

.ca-page .ca-leg-dot-to {
    background: var(--ca-g);
    color: #fff;
}

.ca-page .ca-leg-row {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 12px;
    padding-right: 56px;
}

/* Sits on the dashed line between the legs, right-aligned. */
.ca-page .ca-swap {
    position: absolute;
    right: 16px;
    top: 50%;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    transform: translateY(-50%);
    border: 1px solid var(--ca-line-2);
    border-radius: 12px;
    background: #fff;
    color: var(--ca-g-strong);
    font-size: 14px;
    box-shadow: var(--ca-sh-1);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.ca-page .ca-swap:hover {
    border-color: var(--ca-g);
    box-shadow: var(--ca-sh-2);
}

.ca-page .ca-quote .cargobus-options {
    margin: 16px 0 0 !important;
    padding: 12px 14px;
    border: 1px solid var(--ca-line);
    border-radius: 12px;
    font-size: 14px;
}

.ca-page .ca-quote .cargobus-options legend {
    float: none;
    width: auto;
    margin: 0 0 4px;
    color: var(--ca-ink);
    font-size: 13px !important;
}

.ca-page .ca-quote .cargobus-options .text-muted {
    color: var(--ca-muted) !important;
}

/* green-theme and mobile-responsive style #find-offers with !important. */
.ca-page #find-offers {
    width: 100% !important;
    height: 56px;
    margin-top: 20px !important;
    padding: 0 24px !important;
    border-radius: var(--ca-r) !important;
    font-size: 17px !important;
}

.ca-page .ca-quote-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 18px;
    margin-top: 14px;
    color: var(--ca-muted);
    font-size: 13px;
}

.ca-page .ca-quote-foot i {
    margin-right: 5px;
    color: var(--ca-g);
}

/* ---------- spotlight strip ---------- */
.ca-page .ca-announce {
    position: relative;
    z-index: 2;
    margin-top: -56px;
}

.ca-page .ca-announce .announcement-spotlight {
    padding: 0;
}

/* green-theme.css forces .container to 1400px with !important; the card
   keeps to the page's 1200px grid like everything around it. */
.ca-page .ca-announce .announcement-spotlight > .container {
    max-width: var(--ca-max) !important;
    padding-left: 24px;
    padding-right: 24px;
}

.ca-page .ca-announce .announcement-spotlight__card {
    border-radius: var(--ca-r-lg);
    box-shadow: var(--ca-sh-3);
}

/* ---------- results ---------- */
.ca-page .ca-results {
    max-width: var(--ca-max);
    margin: 0 auto;
    padding: 56px 24px 0;
    scroll-margin-top: 16px;
}

.ca-page .ca-results:has(#offers:empty) {
    display: none;
}

.ca-page .ca-results > #offers > .row {
    row-gap: 8px;
}

/* Heading above the list; script in home.blade.php unhides it with the count. */
.ca-page .ca-results-head {
    max-width: var(--ca-max);
    margin: 0 auto;
    padding: 56px 24px 0;
}

.ca-page .ca-results-head + .ca-results {
    padding-top: 28px;
}

.ca-page .ca-results-head h2 {
    margin: 12px 0 0;
    font-size: clamp(28px, 3vw, 36px) !important;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.03em;
}

.ca-page .ca-results-count {
    margin: 10px 0 0;
    color: var(--ca-ink);
    font-size: 17px;
    font-weight: 600;
}

.ca-page .ca-results-note {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin: 6px 0 0;
    color: var(--ca-muted);
    font-size: 14px;
}

.ca-page .ca-results-note i {
    margin-right: 6px;
    color: var(--ca-g);
}

/* The best-price card leads the list: a green frame and a soft tint on top
   of its badge. Colour only, so the cards keep their size. The wizard shares
   the card markup and is left alone. */
.ca-page .ca-results .offer.bg-success-subtle:not(.selected) {
    border-color: var(--ca-g) !important;
    background-color: var(--ca-g-50) !important;
}

/* ---------- offer cards ---------- */
/* Shared by the homepage results and the wizard's step 2. The markup keeps
   the ribbon and tint classes the Cargobus rulings pin (badge offer-recommend,
   badge bg-success, bg-success-subtle); here they become small inline badges
   on a white card. style.css draws them as rotated corner ribbons and
   green-theme.css tints hover and selection with !important, so the
   overrides that fight those say !important too. */
.ca-page .offer,
.ca-page .offer:hover {
    display: flex !important;
    flex-direction: column;
    height: 100%;
    padding: 20px !important;
    border: 1px solid var(--ca-line) !important;
    border-radius: var(--ca-r-lg) !important;
    background-color: #fff !important;
    box-shadow: var(--ca-sh-2) !important;
    color: var(--ca-body);
    cursor: default;
    transition: border-color .15s, box-shadow .15s;
}

.ca-page .offer:hover {
    border-color: var(--ca-g-300) !important;
    box-shadow: var(--ca-sh-2), 0 12px 28px -14px rgba(20, 71, 26, .28) !important;
}

.ca-page .offer.bg-success-subtle {
    background-color: #fff !important;
}

.ca-page .offer.selected,
.ca-page .offer.selected:hover {
    border-color: var(--ca-g) !important;
    box-shadow: 0 0 0 1px var(--ca-g), var(--ca-sh-2) !important;
}

.ca-page .offer.selected::before {
    display: none;
}

.ca-page .offer .offer-recommend,
.ca-page .offer .badge.bg-success,
.ca-page .offer .new-tag {
    position: static;
    left: auto;
    top: auto;
    z-index: auto;
    display: inline-flex;
    align-items: center;
    width: auto;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .01em;
    text-transform: none;
    white-space: nowrap;
    transform: none;
}

.ca-page .offer .offer-recommend,
.ca-page .offer .badge.bg-success {
    gap: 6px;
    padding: 5px 11px 5px 9px;
    font-size: 12.5px;
    letter-spacing: .015em;
}

/* Each marker carries a small Font Awesome glyph (already loaded site-wide). */
.ca-page .offer .offer-recommend::before,
.ca-page .offer .badge.bg-success::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 10.5px;
    line-height: 1;
}

/* Cargobus "We recommend" is a gold diagonal ribbon across the card's
   top-right corner (owner's pick, 2026-10-08), away from the logo. Its
   centre sits on the corner's diagonal, 48px from the corner, so the
   visible length (about 96px) holds the longest of the lv/en/ru labels with
   the text centred; the card clips both ends. The offsets are measured from
   .ca-offer-head (its containing block), which starts 21px inside the card. */
.ca-page .offer:has(.offer-recommend) {
    position: relative;
    overflow: hidden;
}

.ca-page .offer .offer-recommend {
    position: absolute !important;
    top: 1px;
    right: -62px;
    left: auto;
    z-index: 2;
    justify-content: center;
    width: 150px;
    padding: 5px 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(135deg, #ffe08a 0%, #f7c948 100%);
    background-color: #f7c948; /* solid fallback under the gradient */
    color: #4a2c00;
    font-size: 9.5px !important;
    font-weight: 800;
    letter-spacing: .03em !important;
    text-transform: uppercase !important;
    box-shadow: 0 2px 6px -1px rgba(166, 110, 0, .5);
    transform: rotate(45deg) !important;
}

.ca-page .offer .offer-recommend::before {
    display: none;
}

/* The ribbon takes the top-right corner, so on these cards the info button
   drops to the head's bottom edge, beside the tracking chip. Its column
   keeps the name clear of the ribbon. */
.ca-page .offer:has(.offer-recommend) .ca-offer-head > .offer-info {
    align-self: flex-end;
    margin: 0 -10px -8px 0 !important;
    /* Icon only beside the ribbon; the button keeps its aria-label. */
    padding: 0;
    font-size: 0;
}

.ca-page .offer:has(.offer-recommend) .ca-offer-head > .offer-info i {
    margin: 0 !important;
    font-size: 15px;
}

/* Cards show bigger carrier logos than the hero strip; phones keep the
   smaller tile so the name and chips have room. */
.ca-page .offer .ca-logo-tile {
    width: 88px;
    height: 60px;
    padding: 8px;
    border-radius: 14px;
}

@media (max-width: 575.98px) {
    .ca-page .offer .ca-logo-tile {
        width: 72px;
        height: 52px;
        padding: 7px;
    }
}

/* "Best price": brand mint (9:1 text). */
.ca-page .offer .badge.bg-success {
    border-radius: 999px !important;
    background: var(--ca-g-100) !important;
    color: var(--ca-g-deep);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--ca-g-200);
}

.ca-page .offer .badge.bg-success::before {
    content: "\f02b"; /* tag */
    color: var(--ca-g);
}

.ca-page .offer .new-tag {
    padding: 3px 8px;
    background-color: transparent;
    color: var(--ca-g-strong);
    box-shadow: inset 0 0 0 1px var(--ca-g-300);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* One emphasis per card: the ribbon alone marks Cargobus, no gold ring. */

/* Head: logo tile, the name with its badges over the meta lines, and the
   info button. Footer: the price on the left, the select button sized to
   its label on the right. */
.ca-page .offer .ca-offer-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
}

.ca-page .offer .ca-offer-body {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 2px;
}

.ca-page .offer .ca-offer-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
}

.ca-page .offer .ca-offer-title h6 {
    margin: 0;
    color: var(--ca-ink);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
}

/* Delivery time as plain text, tracking as a small chip beside it. */
.ca-page .offer .ca-offer-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

.ca-page .offer .ca-offer-eta {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ca-body);
    font-size: 13px;
    line-height: 1.4;
}

.ca-page .offer .ca-offer-eta i {
    color: var(--ca-muted);
}

.ca-page .offer .small {
    color: var(--ca-muted);
    font-size: 13px;
}

.ca-page .offer .tracking-status {
    align-items: center !important;
    gap: 5px;
    padding: 3px 9px 3px 7px;
    border-radius: 999px;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1.35;
}

.ca-page .offer .tracking-status i {
    margin: 0 !important;
}

/* Tracked: the brand mint chip. */
.ca-page .offer .tracking-status.text-success {
    background: var(--ca-g-50);
    color: var(--ca-g-strong) !important;
    box-shadow: inset 0 0 0 1px var(--ca-g-200);
}

.ca-page .offer .tracking-status .text-success {
    color: var(--ca-g) !important;
}

/* No tracking is a fact about the service, not an error: a quiet grey chip
   instead of red. green-theme enlarges any .text-danger inside a label
   (required-field asterisks), so the sizes are reset with !important. */
.ca-page .offer .tracking-status.text-danger {
    background: #f1f3f1;
    color: var(--ca-body) !important;
    box-shadow: inset 0 0 0 1px var(--ca-line-2);
}

.ca-page .offer .tracking-status.text-danger,
.ca-page .offer .tracking-status .text-danger {
    font-size: 12.5px !important;
    font-weight: 500 !important;
}

.ca-page .offer .tracking-status .text-danger {
    color: var(--ca-muted) !important;
}

/* On phones the chip can wrap to two lines; a rounded box reads better
   there than a two-line pill. */
@media (max-width: 575.98px) {
    .ca-page .offer .tracking-status {
        border-radius: 10px;
    }
}

.ca-page .offer .offer-info {
    flex: none;
    justify-content: center;
    gap: 4px;
    min-width: 44px;
    min-height: 44px;
    margin: -8px -10px 0 0 !important;
    padding: 0 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ca-muted) !important;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.ca-page .offer .offer-info:hover {
    background: var(--ca-g-50);
    color: var(--ca-g-strong) !important;
}

.ca-page .offer .offer-footer {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between;
    gap: 12px 16px !important;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--ca-line);
}

.ca-page .offer .offer-footer .price-info {
    display: flex;
    flex-direction: column;
    width: auto !important;
    margin: 0 !important;
    align-items: flex-start !important;
    text-align: left !important;
}

.ca-page .offer .offer-price {
    color: var(--ca-ink);
    font-size: 22px;
    font-weight: 800 !important;
    line-height: 1.1;
    letter-spacing: -.02em;
    white-space: nowrap;
}

.ca-page .offer .price-info .small {
    margin-top: 2px;
    font-size: 12px;
}

.ca-page .offer .offer-footer .select-btn {
    flex: none;
    width: auto !important;
    min-height: 48px;
    margin-left: auto;
    padding: 0 22px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
}

/* Narrow cards (two columns beside the wizard summary, phones): the info
   button keeps its text for assistive tech but shows only the icon. Below
   360px of card content the price and the select button no longer fit side
   by side in every language and price length (RU button about 221px plus a
   four-digit pallet price), so the footer stacks: the price, then the button
   across the card. The arrangement depends on the card width only, never on
   the digits of the price, so cards in one row line up (QA-02). */
.ca-page .offer {
    container-type: inline-size;
}

@container (max-width: 420px) {
    .ca-page .offer .offer-info {
        padding: 0;
        font-size: 0;
    }

    .ca-page .offer .offer-info i {
        margin: 0 !important;
        font-size: 17px;
    }
}

@container (max-width: 359px) {
    .ca-page .offer .offer-footer {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .ca-page .offer .offer-footer .select-btn {
        width: 100% !important;
        margin-left: 0;
    }
}

/* Narrow cards: the delivery time and the tracking chip take a row of their
   own under the logo instead of a squeezed column beside it, so no word has
   to break (QA-01). The body box steps aside (display: contents) and its
   title and meta become grid items of the head. */
@container (max-width: 320px) {
    .ca-page .offer .ca-offer-head {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        column-gap: 12px;
        row-gap: 12px;
        align-items: start;
    }

    .ca-page .offer .ca-offer-body {
        display: contents;
    }

    .ca-page .offer .ca-offer-head > .ca-logo-tile {
        grid-column: 1;
        grid-row: 1;
    }

    .ca-page .offer .ca-offer-title {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
    }

    .ca-page .offer .ca-offer-head > .offer-info {
        grid-column: 3;
        grid-row: 1;
    }

    .ca-page .offer .ca-offer-meta {
        grid-column: 1 / -1;
        grid-row: 2;
        margin-top: 0;
    }
}

/* Side by side, the price column shrinks and an extreme price wraps inside
   it instead of pushing the button onto a line of its own. */
@container (min-width: 360px) {
    .ca-page .offer .offer-footer {
        flex-wrap: nowrap !important;
    }

    .ca-page .offer .offer-footer .price-info {
        flex: 1 1 auto;
        min-width: 0;
    }

    .ca-page .offer .offer-price {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* order-fixes.css breaks the tracking label anywhere (!important); with
   room of its own it wraps between words only. */
.ca-page .offer .tracking-text {
    word-break: normal !important;
    overflow-wrap: break-word;
    hyphens: manual !important;
}

/* ---------- info modal ---------- */
.ca-page .ca-om {
    overflow: hidden;
    border: 0;
    border-radius: var(--ca-r-lg);
    background: #fff;
    box-shadow: var(--ca-sh-3);
}

.ca-page .ca-om-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--ca-line);
}

.ca-page .ca-om-heading {
    flex: 1 1 auto;
    min-width: 0;
}

.ca-page .ca-om-head .modal-title {
    margin: 0;
    color: var(--ca-ink);
    font-size: 17px !important;
    font-weight: 700;
    line-height: 1.3;
}

.ca-page .ca-om-eta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 0;
    color: var(--ca-body);
    font-size: 13.5px;
}

.ca-page .ca-om-eta i {
    color: var(--ca-g);
}

.ca-page .ca-om-head .btn-close {
    flex: none;
    align-self: flex-start;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    margin: -8px -10px 0 0;
    padding: 0;
    border-radius: 10px;
    background-size: 12px;
}

.ca-page .ca-om .modal-body {
    padding: 20px;
    color: var(--ca-body);
    font-size: 14px;
}

/* On a short screen the sheet stops at the window and its body scrolls.
   A white fade pinned to the bottom edge says there is more below; at the
   end it only covers the body's bottom padding. */
.ca-page .ca-om {
    max-height: calc(100dvh - 1rem);
}

.ca-page .ca-om .modal-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ca-page .ca-om .modal-body::after {
    content: "";
    position: sticky;
    bottom: -20px;
    display: block;
    height: 28px;
    margin: -8px -20px -20px;
    background: linear-gradient(rgba(255, 255, 255, 0), #fff 75%);
    pointer-events: none;
}

@media (min-width: 576px) {
    .ca-page .ca-om {
        max-height: calc(100dvh - 3.5rem);
    }
}

.ca-page .ca-om-name {
    margin: 0 0 4px;
    color: var(--ca-ink);
    font-size: 16px;
    font-weight: 700;
}

.ca-page .ca-om-desc {
    margin: 0 0 16px;
    color: var(--ca-muted);
    font-size: 13.5px;
    line-height: 1.5;
}

.ca-page .ca-om-rows {
    margin: 0 0 20px;
    border: 1px solid var(--ca-line);
    border-radius: 12px;
}

.ca-page .ca-om-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 14px;
}

.ca-page .ca-om-row + .ca-om-row {
    border-top: 1px solid var(--ca-line);
}

.ca-page .ca-om-row dt {
    color: var(--ca-muted);
    font-weight: 500;
}

.ca-page .ca-om-row dd {
    margin: 0;
    color: var(--ca-ink);
    font-weight: 600;
    text-align: right;
}

.ca-page .ca-om-row dd i {
    margin-right: 6px;
}

.ca-page .ca-om-row .ca-om-yes {
    color: var(--ca-g-strong);
}

.ca-page .ca-om-row .ca-om-no {
    color: var(--ca-muted);
}

.ca-page .ca-om-sub {
    margin: 0 0 8px;
    color: var(--ca-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ca-page .ca-om .pricing-breakdown {
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--ca-g-50);
}

.ca-page .ca-om-price {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.ca-page .ca-om-total {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--ca-g-200);
    color: var(--ca-ink);
    font-size: 15px;
    font-weight: 700;
}

.ca-page .ca-om-note {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    color: var(--ca-muted);
    font-size: 13px;
    line-height: 1.45;
}

.ca-page .ca-om-note i {
    margin-top: 3px;
    color: var(--ca-g);
}

/* ---------- no offers ---------- */
.ca-page .ca-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 680px;
    margin: 0 auto;
    padding: 28px 28px 32px;
    border: 1px solid var(--ca-line);
    border-radius: var(--ca-r-xl);
    background: #fff;
    box-shadow: var(--ca-sh-2);
    text-align: center;
}

.ca-page .ca-empty-img {
    width: 128px;
    height: 128px;
    margin-bottom: 8px;
}

.ca-page .ca-empty-title {
    margin: 0 0 8px;
    color: var(--ca-ink);
    font-size: 22px !important;
    font-weight: 700;
    letter-spacing: -.015em;
}

.ca-page .ca-empty-text {
    max-width: 54ch;
    margin: 0 0 22px;
    color: var(--ca-body);
    font-size: 15px;
    line-height: 1.55;
}

.ca-page .ca-empty-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.ca-page .ca-empty-actions .ca-btn i {
    color: var(--ca-g);
}

.ca-page .ca-empty-actions .ca-btn:focus-visible {
    outline: 2px solid var(--ca-g);
    outline-offset: 2px;
}

/* ---------- sections ---------- */
.ca-page .ca-sec {
    padding: var(--ca-sec-y) 0;
}

/* A solid tint, so each section edge is visible and two paddings never
   merge into one large white gap. */
.ca-page .ca-sec-tint {
    background: var(--ca-g-50);
}

.ca-page .ca-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* The brand green measures about 4.4:1 on the tinted sections, under AA
       for 13px text; this darker green clears it on white and tint alike. */
    color: #27632b;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ca-page .ca-kicker::before {
    content: "";
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.ca-page .ca-sec-head {
    max-width: 640px;
    margin-bottom: 56px;
}

.ca-page .ca-sec-head.ca-center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.ca-page .ca-sec-head h2,
.ca-page .ca-feature h2,
.ca-page .ca-acc-title {
    margin: 14px 0 0;
    font-size: clamp(30px, 3.4vw, 44px) !important;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.03em;
    text-wrap: balance;
}

.ca-page .ca-sec-head p {
    margin: 16px 0 0;
    font-size: 18px;
}

/* steps */
.ca-page .ca-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.ca-page .ca-steps::before {
    content: "";
    position: absolute;
    top: 56px;
    left: 16%;
    right: 16%;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--ca-g-300) 0 6px, transparent 6px 14px);
}

.ca-page .ca-step {
    position: relative;
    z-index: 1;
    padding: 28px;
    border: 1px solid var(--ca-line);
    border-radius: var(--ca-r-lg);
    background: #fff;
    box-shadow: var(--ca-sh-1);
    transition: box-shadow .2s, transform .2s, border-color .2s;
}

.ca-page .ca-step:hover {
    border-color: var(--ca-g-200);
    box-shadow: var(--ca-sh-3);
    transform: translateY(-3px);
}

.ca-page .ca-step-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.ca-page .ca-step-ic {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(145deg, #3f9444, var(--ca-g-strong));
    color: #fff;
    font-size: 22px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 8px 18px -8px rgba(27, 94, 32, .7);
}

.ca-page .ca-step-n {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    background: var(--ca-g-100);
    color: var(--ca-g-strong);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
}

.ca-page .ca-step h3,
.ca-page .ca-why-item h3 {
    margin: 0 0 8px;
    font-size: 20px !important;
    font-weight: 700;
    line-height: 1.25;
}

.ca-page .ca-step p,
.ca-page .ca-why-item p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.6;
}

/* cargobus feature */
.ca-page .ca-feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 72px;
    align-items: center;
}

.ca-page .ca-feature h2 {
    margin-bottom: 18px;
}

.ca-page .ca-lead {
    margin: 0;
    font-size: 18px;
}

.ca-page .ca-bul {
    display: grid;
    gap: 16px;
    margin: 28px 0 32px;
    padding: 0;
    list-style: none;
}

.ca-page .ca-bul li {
    display: flex;
    gap: 14px;
}

.ca-page .ca-bul-ic {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--ca-g-100);
    color: var(--ca-g-strong);
    font-size: 14px;
}

.ca-page .ca-bul strong {
    display: block;
    color: var(--ca-ink);
    font-size: 16px;
    font-weight: 600;
}

.ca-page .ca-bul span {
    font-size: 15px;
}

.ca-page .ca-visual {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 32px;
    border-radius: var(--ca-r-xl);
    background:
        radial-gradient(500px 300px at 90% 0%, rgba(76, 160, 82, .45), transparent 60%),
        radial-gradient(400px 300px at 0% 100%, rgba(13, 51, 18, .8), transparent 60%),
        linear-gradient(150deg, #1f6b25, #14471a);
    box-shadow: var(--ca-sh-3);
}

.ca-page .ca-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .35;
    background-image: radial-gradient(rgba(255, 255, 255, .18) 1px, transparent 1px);
    background-size: 18px 18px;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%);
    mask-image: linear-gradient(180deg, #000, transparent 80%);
}

.ca-page .ca-v-stack {
    display: grid;
    /* minmax(0, ...): the implicit auto track would grow with the widest
       card and push it past the overflow:hidden panel at large text. */
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

.ca-page .ca-v-card {
    min-width: 0;
    padding: 20px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .45);
}

.ca-page .ca-v-card-sm {
    padding: 16px 20px;
}

.ca-page .ca-v-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ca-line);
}

.ca-page .ca-v-head img {
    width: 40px;
    height: 40px;
    padding: 5px;
    border: 1px solid var(--ca-line);
    border-radius: 10px;
    background: #fff;
    object-fit: contain;
}

.ca-page .ca-v-head > div {
    min-width: 0;
}

.ca-page .ca-v-head b {
    display: block;
    color: var(--ca-ink);
    font-size: 15px;
    line-height: 1.3;
}

.ca-page .ca-v-head small,
.ca-page .ca-v-city,
.ca-page .ca-doc-h small,
.ca-page .ca-pay-opt small {
    color: var(--ca-muted);
    font-size: 13px;
}

.ca-page .ca-v-badge {
    position: relative;
    overflow: hidden;
    /* overflow:hidden lets a flex item shrink below its text; keep the
       full label and wrap the head row instead. */
    flex: none;
    max-width: 100%;
    margin-left: auto;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--ca-g-100);
    color: var(--ca-g-strong);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ca-page .ca-v-route {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 18px 0 4px;
}

.ca-page .ca-v-city {
    min-width: 0;
    overflow-wrap: anywhere;
}

.ca-page .ca-v-city b {
    display: block;
    color: var(--ca-ink);
    font-size: 17px;
    letter-spacing: -.01em;
}

.ca-page .ca-v-city-r {
    text-align: right;
}

/* The dashes live on a pseudo-element one dash period wider than the line,
   so sliding it by that period loops seamlessly. The truck span is as wide
   as the line, which lets a percentage transform carry the icon end to end;
   at rest it sits in the middle. */
.ca-page .ca-v-line {
    position: relative;
    flex: 1;
    min-width: 40px;
    height: 28px;
    overflow: hidden;
}

.ca-page .ca-v-line::before {
    content: "";
    position: absolute;
    top: 13px;
    left: -12px;
    right: 0;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--ca-g-300) 0 6px, transparent 6px 12px);
}

.ca-page .ca-v-truck {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    line-height: 1;
    transform: translate(calc(50% - 16px), -50%);
}

.ca-page .ca-v-truck i {
    display: inline-block;
    width: 32px;
    padding: 0 8px;
    background: #fff;
    color: var(--ca-g);
    font-size: 15px;
    text-align: center;
}

/* Motion: concept-a.js adds ca-v-armed when motion is allowed and
   ca-v-inview once the card scrolls into view. The cards and chips stay
   visible throughout: armed only offsets them, so a jump past the section
   (or an observer that never fires) can never leave an empty green box. */
.ca-page .ca-visual.ca-v-armed .ca-v-card,
.ca-page .ca-visual.ca-v-armed .ca-chip {
    transform: translateY(16px);
}

.ca-page .ca-visual.ca-v-inview .ca-v-card,
.ca-page .ca-visual.ca-v-inview .ca-chip {
    animation: ca-v-rise .7s cubic-bezier(.2, .7, .2, 1) both;
}

.ca-page .ca-visual.ca-v-inview .ca-v-card-sm {
    animation-delay: .12s;
}

.ca-page .ca-visual.ca-v-inview .ca-chip:nth-child(1) {
    animation-delay: .3s;
}

.ca-page .ca-visual.ca-v-inview .ca-chip:nth-child(2) {
    animation-delay: .38s;
}

.ca-page .ca-visual.ca-v-inview .ca-chip:nth-child(3) {
    animation-delay: .46s;
}

.ca-page .ca-visual.ca-v-inview .ca-chip:nth-child(4) {
    animation-delay: .54s;
}

.ca-page .ca-visual.ca-v-inview .ca-v-truck {
    animation: ca-v-truck 5.2s cubic-bezier(.45, .05, .35, 1) .5s infinite backwards;
}

.ca-page .ca-visual.ca-v-inview .ca-v-line::before {
    animation: ca-v-dash 1.2s linear infinite;
}

.ca-page .ca-visual.ca-v-inview .ca-v-badge::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .85) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: ca-v-shine 1.2s ease-in-out 1s both;
}

/* The truck drives in from the left (it faces right) once the panel is in
   view and dips its nose as it brakes. Armed parks it past the panel's left
   edge, which clips it; the cards beside it are never hidden. */
.ca-page .ca-visual.ca-v-armed .ca-cb-art {
    transform: translateX(-130%);
}

.ca-page .ca-visual.ca-v-inview .ca-cb-art {
    transform-origin: 50% 100%;
    animation: ca-v-arrive 1.4s cubic-bezier(.25, .8, .3, 1) both;
}

@keyframes ca-v-arrive {
    0% {
        transform: translateX(-130%);
    }

    70% {
        transform: translateX(2%);
    }

    85% {
        transform: translateX(-.5%) rotate(.6deg);
    }

    100% {
        transform: none;
    }
}

@keyframes ca-v-rise {
    from {
        transform: translateY(16px);
    }

    to {
        transform: none;
    }
}

@keyframes ca-v-truck {
    0% {
        opacity: 0;
        transform: translate(0, -50%);
    }

    12% {
        opacity: 1;
    }

    84% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate(calc(100% - 32px), -50%);
    }
}

@keyframes ca-v-dash {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(12px);
    }
}

@keyframes ca-v-shine {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(100%);
    }
}

.ca-page .ca-v-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.ca-page .ca-pill-ok {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--ca-g-100);
    color: var(--ca-g-strong);
    font-size: 12px;
    font-weight: 600;
}

.ca-page .ca-v-pallet {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: center;
}

.ca-page .ca-v-pi {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border: 1px solid var(--ca-g-200);
    border-radius: 16px;
    background: linear-gradient(160deg, #fff, var(--ca-g-100));
}

/* The same 3D pallet render as the quote card's type picker, so the two
   sections speak one illustration language. */
.ca-page .ca-v-pi img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    /* The render has a solid white ground; multiply drops it onto the tile. */
    mix-blend-mode: multiply;
}

.ca-page .ca-v-pallet b {
    display: block;
    color: var(--ca-ink);
    font-size: 15px;
}

.ca-page .ca-v-pallet span {
    font-size: 13.5px;
}

.ca-page .ca-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.ca-page .ca-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
}

.ca-page .ca-flag {
    display: inline-block;
    width: 18px;
    height: 12px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
}

.ca-page .ca-flag-lv {
    background: linear-gradient(#9e3039 40%, #fff 40% 60%, #9e3039 60%);
}

.ca-page .ca-flag-ee {
    background: linear-gradient(#0072ce 33.3%, #000 33.3% 66.6%, #fff 66.6%);
}

.ca-page .ca-flag-lt {
    background: linear-gradient(#fdb913 33.3%, #006a44 33.3% 66.6%, #c1272d 66.6%);
}

.ca-page .ca-flag-eu {
    position: relative;
    background: #039;
}

.ca-page .ca-flag-eu::after {
    content: "";
    position: absolute;
    inset: 3px 5px;
    border-radius: 50%;
    border: 1.5px dotted #ffcc00;
}

/* why: heading and lede side by side on wide screens, six separate cards
   with a filled icon tile. */
@media (min-width: 992px) {
    .ca-page .ca-why .ca-sec-head {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        column-gap: 64px;
        align-items: end;
        max-width: none;
    }

    .ca-page .ca-why .ca-sec-head .ca-kicker,
    .ca-page .ca-why .ca-sec-head h2 {
        grid-column: 1;
    }

    .ca-page .ca-why .ca-sec-head p {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: end;
        margin: 0;
    }
}

.ca-page .ca-why-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.ca-page .ca-why-item {
    padding: 36px 32px;
    border: 1px solid var(--ca-line);
    border-radius: var(--ca-r-lg);
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 26, 18, .04);
    transition: border-color .2s, box-shadow .2s, transform .2s;
}

.ca-page .ca-why-item:hover {
    border-color: var(--ca-g-200);
    box-shadow: 0 12px 28px -18px rgba(20, 71, 26, .45);
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .ca-page .ca-why-item:hover {
        transform: none;
    }
}

.ca-page .ca-why-item h3 {
    font-size: 18px !important;
}

.ca-page .ca-why-ic {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 20px;
    border-radius: var(--ca-r);
    background: linear-gradient(145deg, var(--ca-g), var(--ca-g-strong));
    color: #fff;
    font-size: 19px;
    box-shadow: 0 6px 14px -8px rgba(46, 125, 50, .7);
}

/* accounts */
.ca-page .ca-acc {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 64px;
    align-items: center;
}

.ca-page .ca-tabs {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    margin: 28px 0;
    padding: 5px;
    border: 1px solid var(--ca-line);
    border-radius: var(--ca-r);
    background: var(--ca-g-50);
}

.ca-page .ca-tabs button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 20px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ca-body);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s, color .15s, box-shadow .15s;
}

.ca-page .ca-tabs button[aria-selected="true"] {
    background: #fff;
    color: var(--ca-g-deep);
    box-shadow: var(--ca-sh-2), 0 0 0 1px rgba(46, 125, 50, .22);
}

.ca-page .ca-panel .ca-bul {
    margin: 0 0 32px;
}

.ca-page .ca-acc-visual {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
    min-height: 420px;
    padding: 40px;
    overflow: hidden;
    border: 1px solid var(--ca-g-200);
    border-radius: var(--ca-r-xl);
    background: linear-gradient(160deg, var(--ca-g-100), var(--ca-g-50));
}

.ca-page .ca-acc-visual::before {
    content: "";
    position: absolute;
    right: -120px;
    top: -120px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(46, 125, 50, .16), transparent 65%);
}

.ca-page .ca-acc-visual [hidden] {
    display: none !important;
}

.ca-page .ca-doc {
    position: relative;
    width: 100%;
    max-width: 400px;
    padding: 24px;
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--ca-sh-3);
}

.ca-page .ca-doc-h {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
}

.ca-page .ca-doc-h b,
.ca-page .ca-pay-opt b {
    display: block;
    color: var(--ca-ink);
    font-size: 15px;
}

.ca-page .ca-pay-opt {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--ca-g);
    border-radius: var(--ca-r);
    box-shadow: 0 0 0 4px rgba(46, 125, 50, .12);
}

.ca-page .ca-d-ic {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--ca-g-50);
    color: var(--ca-g-strong);
    font-size: 14px;
}

.ca-page .ca-radio {
    width: 20px;
    height: 20px;
    margin-left: auto;
    border: 6px solid var(--ca-g);
    border-radius: 50%;
}

.ca-page .ca-ship-list {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.ca-page .ca-ship-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "ic route chip" "ic type chip";
    align-items: center;
    column-gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--ca-line);
}

.ca-page .ca-ship-row .ca-d-ic {
    grid-area: ic;
}

.ca-page .ca-ship-route {
    grid-area: route;
    overflow: hidden;
    color: var(--ca-ink);
    font-size: 14px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ca-page .ca-ship-type {
    grid-area: type;
    color: var(--ca-muted);
    font-size: 13px;
}

.ca-page .ca-ship-chip {
    grid-area: chip;
    padding: 4px 10px;
    border-radius: 999px;
    background: #f6efe0;
    color: #6b4a0f;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.ca-page .ca-ship-chip--in_transit {
    background: var(--ca-g-50);
    color: var(--ca-g-strong);
}

.ca-page .ca-ship-chip--delivered {
    background: var(--ca-g-100);
    color: var(--ca-g-deep);
}

.ca-page .ca-doc-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--ca-line);
    color: var(--ca-ink);
    font-size: 14px;
    font-weight: 600;
}

.ca-page .ca-doc-foot i {
    color: var(--ca-g);
}

.ca-page .ca-float-tag {
    position: absolute;
    left: 24px;
    bottom: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    background: #fff;
    color: var(--ca-ink);
    font-size: 13px;
    font-weight: 600;
    box-shadow: var(--ca-sh-2);
}

.ca-page .ca-float-tag i {
    color: var(--ca-g);
}

/* CMS block: admin-edited content; collapses when empty. */
.ca-page .cms-home-block {
    padding-top: var(--ca-sec-y);
    padding-bottom: var(--ca-sec-y);
}

.ca-page .cms-home-block:empty {
    display: none;
}

/* tracking band */
.ca-page .ca-track {
    padding: var(--ca-sec-y) 0;
}

/* A filled CMS block already ends with a section gap. */
.ca-page .cms-home-block:not(:empty) + .ca-track {
    padding-top: 0;
}

.ca-page .ca-track-card {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 48px;
    align-items: center;
    overflow: hidden;
    padding: 56px;
    border-radius: var(--ca-r-xl);
    background:
        radial-gradient(600px 300px at 100% 0%, rgba(76, 160, 82, .5), transparent 60%),
        linear-gradient(140deg, #1b5e20, #14471a 70%);
    color: #fff;
    box-shadow: var(--ca-sh-3);
}

.ca-page .ca-track-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .4;
    background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 40px 40px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000);
    mask-image: linear-gradient(90deg, transparent, #000);
}

.ca-page .ca-track-card h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(28px, 3vw, 38px) !important;
    font-weight: 700;
    letter-spacing: -.03em;
}

.ca-page .ca-track-card p {
    margin: 12px 0 0;
    color: var(--ca-on-dark);
    font-size: 17px;
}

.ca-page .ca-track-label {
    display: block;
    margin-bottom: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.ca-page .ca-track-label .text-danger {
    /* #ffc9c2 measured 3.9:1 on the lightest part of the band; this pale
       red keeps the cue and reaches 4.6:1 there. */
    color: #ffe1dc !important;
}

.ca-page .ca-track-row {
    display: flex;
    gap: 8px;
    padding: 8px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .45);
}

.ca-page .ca-track-field {
    position: relative;
    flex: 1;
    min-width: 0;
}

.ca-page .ca-track-field i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ca-muted);
}

.ca-page .ca-track-field .ca-input {
    height: 52px;
    padding-left: 44px;
    border: 0;
}

.ca-page .ca-track-field .ca-input:focus {
    box-shadow: 0 0 0 3px rgba(46, 125, 50, .2);
}

.ca-page .ca-track-row .ca-btn {
    height: 52px;
    padding: 0 22px;
}

/* ---------- footer ---------- */
.ca-page .ca-footer {
    flex-grow: 1;
    padding: 72px 0 32px;
    background: var(--ca-g-night);
    color: var(--ca-on-dark);
    font-size: 15px;
}

/* The shell's font rule above also sets the body colour, which is dark
   on this background; its footer text keeps the light colour. */
.ca-page.ca-shell .ca-footer {
    color: var(--ca-on-dark);
}

.ca-page .ca-footer a {
    color: var(--ca-on-dark);
    text-decoration: none;
}

.ca-page .ca-footer a:hover {
    color: #fff;
}

/* Footer links are 16-19px lines; give each a 24px target (WCAG 2.5.8).
   :where() keeps this at the specificity of the phone rule below, which
   sets 44px rows and must win there. */
/* On the send-parcel wizard a summary bar (up to 74px) is fixed to the
   bottom of the screen below 1200px; the footer's last row scrolls clear of
   it. Up to 1000px the footer already carries 112px. */
@media (min-width: 1001px) and (max-width: 1199.98px) {
    body.ca-page.ca-wizard-page .ca-footer {
        padding-bottom: calc(90px + env(safe-area-inset-bottom));
    }
}

.ca-page .ca-footer :where(li) > a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

.ca-page .ca-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 48px;
}

.ca-page .ca-footer-brand p {
    max-width: 320px;
    margin: 18px 0 0;
}

.ca-page .ca-footer-heading {
    margin: 0 0 16px;
    color: #fff;
    font-size: 14px !important;
    font-weight: 600;
    letter-spacing: .02em;
}

.ca-page .ca-footer ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ca-page .ca-footer-contact li {
    display: flex;
    gap: 10px;
    align-items: baseline;
}

.ca-page .ca-footer-contact i {
    color: var(--ca-g-mint);
}

.ca-page .ca-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: 13.5px;
}

.ca-page .ca-footer-bottom p {
    margin: 0;
}

.ca-page .ca-footer-bottom ul {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* ---------- other public pages ---------- */
/* The breadcrumb sits directly in body; both it and the page content
   follow the header's 1200px grid rather than green-theme's 1400px. */
body.ca-page:where(:not(.ca-shell)) > .container,
.ca-page:where(:not(.ca-shell)) main > .container {
    width: 100%;
    max-width: var(--ca-max) !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.ca-page:where(:not(.ca-shell)) .breadcrumb {
    margin-top: 24px !important;
    margin-bottom: 0 !important;
    font-size: 14px;
}

.ca-page:where(:not(.ca-shell)) .breadcrumb + * {
    margin-top: 0;
}

.ca-page:where(:not(.ca-shell)) main > .container > h1,
.ca-page:where(:not(.ca-shell)) main > .container > h3 {
    margin-bottom: 24px !important;
    color: var(--ca-ink);
    font-size: clamp(28px, 3vw, 38px) !important;
    font-weight: 700;
    letter-spacing: -.03em;
}

.ca-page:where(:not(.ca-shell)) main .form-wrap,
.ca-page:where(:not(.ca-shell)) main > .container .bg-white.rounded.shadow-sm {
    padding: 28px !important;
    border: 1px solid var(--ca-line);
    border-radius: var(--ca-r-lg) !important;
    box-shadow: var(--ca-sh-2) !important;
}

.ca-page:where(:not(.ca-shell)) main .form-label,
.ca-page:where(:not(.ca-shell)) main .form-group label {
    color: var(--ca-ink);
    font-size: 13px;
    font-weight: 600;
}

.ca-page:where(:not(.ca-shell)) main .form-control {
    min-height: 48px;
    border: 1px solid var(--ca-line-2);
    border-radius: 12px;
    color: var(--ca-ink);
}

/* Public forms (login, registration, recovery, reset, contact) get one
   field: the calculator's 48px input with a 1px border and 12px radius.
   green-theme.css forces its own border, radius, padding and size with
   !important, so these properties need it too. The wizard styles its own. */
.ca-page:where(:not(.ca-shell, .ca-wizard-page)) main .form-control:not(textarea) {
    height: 48px;
    min-height: 48px !important;
    padding: 0 14px !important;
    border: 1px solid var(--ca-line-2) !important;
    border-radius: 12px !important;
    background-color: #fff !important;
    color: var(--ca-ink);
    font-size: 16px !important;
}

.ca-page:where(:not(.ca-shell, .ca-wizard-page)) main .form-control:hover:not(:focus) {
    border-color: #b9c6bc !important;
}

.ca-page:where(:not(.ca-shell)) main .form-control::placeholder,
.ca-page:where(:not(.ca-shell)) main .form-control:focus::placeholder {
    /* green-theme.css pins #9e9e9e with !important; style.css makes the
       placeholder italic and drops it to 0.6 opacity on focus. */
    color: var(--ca-placeholder) !important;
    font-style: normal;
    opacity: 1;
}

.ca-page:where(:not(.ca-shell)) main .form-control:focus {
    border-color: var(--ca-g);
    box-shadow: 0 0 0 4px rgba(46, 125, 50, .14);
}

.ca-page:where(:not(.ca-shell, .ca-wizard-page)) main .form-control:focus {
    border-color: var(--ca-g) !important;
    box-shadow: 0 0 0 4px rgba(46, 125, 50, .14) !important;
}

.ca-page:where(:not(.ca-shell)) main .btn-success {
    border-radius: 12px !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 6px 16px -6px rgba(46, 125, 50, .55) !important;
}

/* On public pages the primary button matches the site's: 48px, 15px text. */
.ca-page:where(:not(.ca-shell, .ca-wizard-page)) main .btn-success {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* height, not min-height: green-theme.css pins min-height 44px through a
       far more specific button[type="submit"]:not(...) selector. */
    height: 48px;
    padding: 0 20px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 6px 16px -6px rgba(46, 125, 50, .55) !important;
}

/* mobile-responsive.css adds a 2px border under these, doubling the
   underline. */
.ca-page:where(:not(.ca-shell)) main a.text-success {
    color: var(--ca-g) !important;
    border-bottom: 0 !important;
    text-underline-offset: 3px;
}

.ca-page:where(:not(.ca-shell)) .tracking-road h2 {
    color: var(--ca-ink);
    font-size: 22px !important;
    font-weight: 700;
}

/* Registration's account-type toggle uses the secondary button look; both
   halves share one height even when one label wraps. */
.ca-page:where(:not(.ca-shell)) .segmented-toggle {
    align-items: stretch;
}

.ca-page:where(:not(.ca-shell)) .segmented-toggle .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ca-line-2);
    background: #fff;
    color: var(--ca-ink);
}

.ca-page:where(:not(.ca-shell)) .segmented-toggle .btn-check:checked + .btn {
    border-color: var(--ca-g);
    background: var(--ca-g-50);
    color: var(--ca-g-deep);
    box-shadow: 0 0 0 1px var(--ca-g);
}

/* Login and registration: the form card plus a brand panel in the deep
   green of the tracking panel. Its copy is the homepage "Kāpēc Pumity"
   headline, three of its benefits and the carrier logos, so it never claims
   anything the site does not already say. It is as tall as its content and,
   on desktop, stays in view beside a long form instead of stretching. */
.ca-page:where(:not(.ca-shell)) .ca-auth-aside {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 36px 36px 32px;
    border-radius: var(--ca-r-lg);
    background-color: var(--ca-g-deep);
    background-image:
        radial-gradient(420px 300px at 90% 0%, rgba(76, 160, 82, .45), transparent 60%),
        linear-gradient(155deg, #1f6b25, #14471a);
    box-shadow: var(--ca-sh-3);
    color: var(--ca-on-dark);
}

.ca-page:where(:not(.ca-shell)) .ca-auth-aside .ca-kicker {
    color: #d6f0d8;
}

.ca-page:where(:not(.ca-shell)) .ca-auth-aside .ca-kicker::before {
    background: var(--ca-g-mint);
}

.ca-page:where(:not(.ca-shell)) .ca-auth-aside h2 {
    margin: 12px 0 0;
    color: #fff;
    font-size: 26px !important;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
}

.ca-page:where(:not(.ca-shell)) .ca-auth-aside-lede {
    max-width: 40ch;
    margin: 12px 0 0;
    color: var(--ca-on-dark);
    font-size: 15px;
    line-height: 1.55;
}

.ca-page:where(:not(.ca-shell)) .ca-auth-perks {
    display: grid;
    gap: 18px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.ca-page:where(:not(.ca-shell)) .ca-auth-perks li {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 14px;
    align-items: start;
}

.ca-page:where(:not(.ca-shell)) .ca-auth-perk-ic {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
    color: var(--ca-g-mint);
    font-size: 16px;
}

.ca-page:where(:not(.ca-shell)) .ca-auth-perk-copy {
    color: var(--ca-on-dark-soft);
    font-size: 14.5px;
    line-height: 1.5;
}

.ca-page:where(:not(.ca-shell)) .ca-auth-perk-copy b {
    display: block;
    margin-bottom: 2px;
    color: #fff;
    font-size: 15.5px;
    font-weight: 600;
}

.ca-page:where(:not(.ca-shell)) .ca-auth-carriers {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.ca-page:where(:not(.ca-shell)) .ca-auth-carriers p {
    margin: 0 0 12px;
    color: var(--ca-g-mint);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Equal tiles, four per row; a short last row sits centred, not with a gap. */
.ca-page:where(:not(.ca-shell)) .ca-auth-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.ca-page:where(:not(.ca-shell)) .ca-auth-logos .ca-logo-tile {
    flex: 0 0 calc((100% - 24px) / 4);
    width: auto;
    height: 44px;
    padding: 7px;
    border-radius: 10px;
}

@media (min-width: 992px) {
    .ca-page:where(:not(.ca-shell)) .ca-auth-aside {
        position: sticky;
        top: 24px;
    }
}

/* On phones the form stays the focus: the panel keeps its headline and the
   carrier logos, and drops the lede and the benefits. */
@media (max-width: 991.98px) {
    .ca-page:where(:not(.ca-shell)) .ca-auth-aside {
        padding: 24px 22px;
    }

    .ca-page:where(:not(.ca-shell)) .ca-auth-aside-lede,
    .ca-page:where(:not(.ca-shell)) .ca-auth-perks {
        display: none;
    }

    .ca-page:where(:not(.ca-shell)) .ca-auth-carriers {
        margin-top: 20px;
        padding-top: 18px;
    }
}

/* Page hero for contact, tracking and info pages: title and lede on
   the page background, content in white cards below. */
.ca-page .ca-page-hero {
    margin-bottom: 28px;
}

.ca-page .ca-page-hero h1 {
    margin: 0;
    color: var(--ca-ink);
    font-size: clamp(28px, 3vw, 38px) !important;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.15;
}

.ca-page .ca-page-hero-lede {
    max-width: 640px;
    margin: 10px 0 0;
    color: var(--ca-body);
    font-size: 17px;
}

.ca-page .ca-card {
    padding: 28px;
    border: 1px solid var(--ca-line);
    border-radius: var(--ca-r-lg);
    background: #fff;
    box-shadow: var(--ca-sh-2);
}

.ca-page .ca-prose {
    max-width: 820px;
    color: var(--ca-body);
    font-size: 16px;
    line-height: 1.7;
}

.ca-page .ca-prose > :last-child {
    margin-bottom: 0;
}

.ca-page .ca-prose h2,
.ca-page .ca-prose h3 {
    margin: 1.4em 0 .5em;
    color: var(--ca-ink);
    font-size: 20px !important;
}

.ca-page .ca-prose a {
    color: var(--ca-g-strong);
}

/* Info pages: the CMS text at reading width with a help card beside it.
   The text comes from the admin editor, so lists, tables, quotes and images
   get the same care as paragraphs. */
.ca-page .ca-info-layout {
    display: grid;
    gap: 24px;
    align-items: start;
}

@media (min-width: 992px) {
    .ca-page .ca-info-layout {
        grid-template-columns: minmax(0, 1fr) 320px;
    }

    .ca-page .ca-info-help {
        position: sticky;
        top: 96px;
    }
}

.ca-page .ca-info .ca-prose {
    max-width: none;
    padding: 36px 40px;
}

.ca-page .ca-prose :is(ul, ol) {
    margin: 0 0 1em;
    padding-left: 1.3em;
}

.ca-page .ca-prose li + li {
    margin-top: .35em;
}

.ca-page .ca-prose li::marker {
    color: var(--ca-g);
}

.ca-page .ca-prose table {
    width: 100%;
    margin: 0 0 1.2em;
    border-collapse: collapse;
    font-size: 15px;
}

.ca-page .ca-prose :is(th, td) {
    padding: 10px 12px;
    border-bottom: 1px solid var(--ca-line);
    text-align: left;
    vertical-align: top;
}

.ca-page .ca-prose th {
    color: var(--ca-ink);
    font-weight: 600;
    background: var(--ca-g-50);
}

.ca-page .ca-prose blockquote {
    margin: 0 0 1em;
    padding: 12px 18px;
    border-left: 4px solid var(--ca-g-300);
    border-radius: 0 var(--ca-r) var(--ca-r) 0;
    background: var(--ca-g-50);
}

.ca-page .ca-prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--ca-r);
}

.ca-page .ca-prose hr {
    margin: 1.6em 0;
    border: 0;
    border-top: 1px solid var(--ca-line);
}

.ca-page .ca-info-help {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.ca-page .ca-info-help-ic {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--ca-g-50);
    color: var(--ca-g-strong);
    font-size: 18px;
}

.ca-page .ca-info-help-title {
    margin: 4px 0 0;
    color: var(--ca-ink);
    font-size: 18px !important;
    font-weight: 700;
}

.ca-page .ca-info-help-text {
    margin: 0;
    color: var(--ca-body);
    font-size: 14px;
    line-height: 1.55;
}

.ca-page .ca-info-help-contacts {
    display: grid;
    gap: 8px;
    margin: 4px 0 6px;
    padding: 0;
    list-style: none;
    font-size: 14px;
}

.ca-page .ca-info-help-contacts li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ca-page .ca-info-help-contacts i {
    color: var(--ca-g);
}

.ca-page .ca-info-help-contacts a {
    color: var(--ca-ink);
    font-weight: 600;
    text-decoration: none;
}

.ca-page .ca-info-help-contacts a:hover {
    color: var(--ca-g-strong);
    text-decoration: underline;
}

.ca-page .ca-info-help-cta {
    width: 100%;
}

@media (max-width: 575.98px) {
    .ca-page .ca-info .ca-prose {
        padding: 24px 20px;
    }
}

/* Registration: from 992px the fields sit in a two-column grid in DOM
   order, so the pairs read name / surname, email / phone and password /
   repeat password. The Bootstrap columns and rows around them step aside
   (display: contents) but stay in the markup. */
@media (min-width: 992px) {
    /* Bootstrap and style.css rows force flex. */
    .ca-page .ca-reg-fields {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 24px;
        margin: 0;
    }

    .ca-page .ca-reg-fields > .col-xl-6,
    .ca-page .ca-reg-fields > .col-xl-6 > .row,
    .ca-page .ca-reg-fields > .col-xl-6 > .row > .col-lg-6 {
        display: contents !important;
    }
}

/* Error pages (errors/branded.blade.php) */
.ca-page .ca-error {
    display: grid;
    place-items: center;
    padding-top: 72px;
    padding-bottom: 96px;
}

.ca-page .ca-error-card {
    width: 100%;
    max-width: 560px;
    padding: 40px 32px;
    border: 1px solid var(--ca-line);
    border-radius: var(--ca-r-lg);
    background: #fff;
    box-shadow: var(--ca-sh-2);
    text-align: center;
}

.ca-page .ca-error-ic {
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    border-radius: 16px;
    background: var(--ca-g-50);
    color: var(--ca-g-strong);
    font-size: 22px;
}

.ca-page .ca-error-code {
    margin: 0 0 8px;
    color: var(--ca-g-strong);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ca-page .ca-error-card h1 {
    font-weight: 700 !important;
    margin: 0 0 12px;
    font-size: 28px;
}

.ca-page .ca-error-text {
    margin: 0 0 28px;
}

.ca-page .ca-error-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

/* Payment result pages (partials/concept-a/payment-status.blade.php) */
.ca-page .ca-status {
    display: grid;
    place-items: center;
    padding-top: 56px;
    padding-bottom: 88px;
}

.ca-page .ca-status-card {
    width: 100%;
    max-width: 560px;
    padding: 40px 36px 0;
    overflow: hidden;
    border: 1px solid var(--ca-line);
    border-radius: var(--ca-r-lg);
    background: #fff;
    box-shadow: var(--ca-sh-2);
    text-align: center;
}

.ca-page .ca-status-ic {
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 18px;
    border-radius: 16px;
    font-size: 24px;
}

.ca-page .ca-status-ic--warn {
    background: #fdf0e6;
    color: #a4480f;
}

.ca-page .ca-status-ic--neutral {
    background: var(--ca-g-50);
    color: var(--ca-muted);
}

.ca-page .ca-status-card h1 {
    margin: 0 0 12px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}

.ca-page .ca-status-text {
    max-width: 440px;
    margin: 0 auto 28px;
    font-size: 16px;
    line-height: 1.6;
}

.ca-page .ca-status-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.ca-page .ca-status-home {
    display: inline-block;
    margin-top: 18px;
    padding: 4px 2px;
    color: var(--ca-g-strong);
    font-size: 14px;
    font-weight: 600;
    text-underline-offset: 3px;
}

.ca-page .ca-status-help {
    margin: 32px -36px 0;
    padding: 24px 36px 28px;
    border-top: 1px solid var(--ca-line);
    background: var(--ca-g-50);
}

.ca-page .ca-status-help-title {
    margin: 0 0 4px;
    color: var(--ca-ink);
    font-size: 15px;
    font-weight: 600;
}

.ca-page .ca-status-help-text {
    margin: 0 0 14px;
    color: var(--ca-muted);
    font-size: 14px;
}

.ca-page .ca-status-contacts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 22px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
}

.ca-page .ca-status-contacts li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ca-page .ca-status-contacts i {
    color: var(--ca-g);
}

.ca-page .ca-status-contacts a {
    color: var(--ca-ink);
    font-weight: 600;
    text-decoration: none;
}

.ca-page .ca-status-contacts a:hover {
    color: var(--ca-g-strong);
    text-decoration: underline;
}

@media (max-width: 575.98px) {
    .ca-page .ca-status {
        padding-top: 24px;
        padding-bottom: 48px;
    }

    .ca-page .ca-status-card {
        padding: 32px 20px 0;
    }

    .ca-page .ca-status-card h1 {
        font-size: 24px;
    }

    .ca-page .ca-status-actions .ca-btn {
        width: 100%;
    }

    .ca-page .ca-status-help {
        margin: 28px -20px 0;
        padding: 20px 20px 24px;
    }

    .ca-page .ca-status-contacts {
        flex-direction: column;
        align-items: center;
    }
}

/* Contact: the four ways to reach us as rows in one white panel, a drawn
   map beside it, and the quote and tracking band below. Phone and email
   rows are whole links; address and hours carry their own link and badge. */
.ca-page .ca-contact .ca-page-hero .ca-kicker {
    margin-bottom: 12px;
}

.ca-page .ca-contact .ca-page-hero-lede {
    text-wrap: pretty;
}

.ca-page .ca-contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: 24px;
    margin: 0 0 28px;
}

.ca-page .ca-contact-methods {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 8px;
    border: 1px solid var(--ca-line);
    border-radius: var(--ca-r-lg);
    background: #fff;
    box-shadow: var(--ca-sh-2);
    list-style: none;
}

.ca-page .ca-contact-card + .ca-contact-card {
    border-top: 1px solid var(--ca-line);
}

.ca-page .ca-contact-row {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 96px;
    padding: 18px 20px;
    border-radius: var(--ca-r);
    color: inherit;
    text-decoration: none;
}

.ca-page a.ca-contact-row {
    transition: background-color .18s;
}

.ca-page a.ca-contact-row:hover {
    background: var(--ca-g-50);
}

.ca-page .ca-contact-card-ic {
    flex: none;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1px solid var(--ca-g-200);
    border-radius: var(--ca-r);
    background: var(--ca-g-50);
    color: var(--ca-g-strong);
    font-size: 19px;
    transition: background-color .18s, border-color .18s, color .18s;
}

.ca-page a.ca-contact-row:hover .ca-contact-card-ic {
    border-color: var(--ca-g);
    background: var(--ca-g);
    color: #fff;
}

.ca-page .ca-contact-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
}

.ca-page .ca-contact-card-title {
    margin: 0;
    color: var(--ca-muted) !important;
    font-size: 13px !important;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.3;
}

.ca-page .ca-contact-card-value {
    color: var(--ca-ink);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.ca-page .ca-contact-row-go {
    flex: none;
    color: var(--ca-g-strong);
    font-size: 15px;
    opacity: .55;
    transition: opacity .18s, transform .18s;
}

.ca-page a.ca-contact-row:hover .ca-contact-row-go {
    opacity: 1;
    transform: translateX(3px);
}

.ca-page .ca-contact-map {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    margin: -6px 0 -12px;
    color: var(--ca-g-strong);
    font-size: 15px;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--ca-g-300);
    text-underline-offset: 4px;
}

.ca-page .ca-contact-map:hover {
    color: var(--ca-g-deep);
    text-decoration-color: currentColor;
}

.ca-page .ca-contact-map i {
    font-size: 11px;
}

/* Filled in by concept-a.js from the row's opening hours in Riga time;
   without script it stays hidden. */
.ca-page .ca-contact-status {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--ca-line-2);
    border-radius: 999px;
    background: #f4f6f4;
    color: var(--ca-muted);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.ca-page .ca-contact-status[hidden] {
    display: none;
}

.ca-page .ca-contact-status::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ca-placeholder);
}

.ca-page .ca-contact-status.is-open {
    border-color: var(--ca-g-200);
    background: var(--ca-g-50);
    color: var(--ca-g-strong);
}

.ca-page .ca-contact-status.is-open::before {
    background: var(--ca-g);
    box-shadow: 0 0 0 3px rgba(46, 125, 50, .18);
}

/* The drawn map. The solid colour under the gradient is what the contrast
   check sees behind the white place card's neighbours. */
.ca-page .ca-contact-visual {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: block;
    min-height: 360px;
    border-radius: var(--ca-r-lg);
    background-color: var(--ca-g-deep);
    background-image:
        radial-gradient(420px 320px at 85% 0%, rgba(76, 160, 82, .5), transparent 60%),
        radial-gradient(380px 300px at 0% 100%, rgba(13, 51, 18, .85), transparent 60%),
        linear-gradient(150deg, #1f6b25, #14471a);
    box-shadow: var(--ca-sh-3);
    color: #fff;
    text-decoration: none;
}

.ca-page .ca-contact-map-art {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The map is drawn from OpenStreetMap data, whose licence asks for this credit. */
.ca-page .ca-contact-map-credit {
    position: absolute;
    right: 12px;
    bottom: 8px;
    font-size: 11px;
    color: rgba(255, 255, 255, .72);
}

/* The pin sits on the office (300, 234 of the 600 x 480 map, which
   fills the card and stays centred). */
.ca-page .ca-contact-pin {
    position: absolute;
    left: 50%;
    top: 48.75%;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    color: var(--ca-g);
    font-size: 24px;
    box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .5);
    transform: translate(-50%, -50%);
}

.ca-page .ca-contact-pin::before,
.ca-page .ca-contact-pin::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 50%;
    background: rgba(185, 228, 188, .35);
    animation: ca-contact-pulse 2.8s ease-out infinite;
}

.ca-page .ca-contact-pin::after {
    animation-delay: 1.4s;
}

@keyframes ca-contact-pulse {
    from { transform: scale(1); opacity: .9; }
    to { transform: scale(2.6); opacity: 0; }
}

.ca-page .ca-contact-place {
    position: absolute;
    left: 50%;
    top: calc(48.75% + 44px);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px 12px 12px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .5);
    white-space: nowrap;
    transform: translateX(-50%);
}

.ca-page .ca-contact-place-ic {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--ca-g-100);
    color: var(--ca-g-strong);
    font-size: 16px;
}

.ca-page .ca-contact-place b {
    display: block;
    color: var(--ca-ink);
    font-size: 15px;
    line-height: 1.3;
}

.ca-page .ca-contact-place small {
    color: var(--ca-muted);
    font-size: 13px;
}

.ca-page .ca-contact-cms {
    margin-bottom: 28px;
    padding: 28px;
    border: 1px solid var(--ca-line);
    border-radius: var(--ca-r-lg);
    background: #fff;
    box-shadow: var(--ca-sh-2);
}

.ca-page .ca-contact-cta {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 32px;
    padding: 28px 32px;
    border: 1px solid var(--ca-g-200);
    border-radius: var(--ca-r-lg);
    background: linear-gradient(160deg, var(--ca-g-100), var(--ca-g-50));
}

.ca-page .ca-contact-cta-art {
    flex: none;
    width: 230px;
    height: auto;
    margin: -10px 0 -10px -10px;
    filter: drop-shadow(0 10px 12px rgba(15, 26, 18, .18));
}

.ca-page .ca-contact-cta-copy {
    flex: 1 1 260px;
}

.ca-page .ca-contact-cta h2 {
    margin: 0 0 4px;
    color: var(--ca-ink);
    font-size: 22px !important;
    font-weight: 700;
}

.ca-page .ca-contact-cta p {
    margin: 0;
    color: var(--ca-body);
}

.ca-page .ca-contact-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

@media (max-width: 991.98px) {
    .ca-page .ca-contact-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .ca-page .ca-contact-visual {
        min-height: 280px;
    }
}

@media (max-width: 576px) {
    .ca-page .ca-contact-methods {
        padding: 4px;
    }

    .ca-page .ca-contact-row {
        gap: 14px;
        min-height: 80px;
        padding: 16px 14px;
    }

    .ca-page .ca-contact-card-ic {
        width: 44px;
        height: 44px;
        font-size: 17px;
    }

    .ca-page .ca-contact-card-value {
        font-size: 17px;
    }

    /* The badge drops under the hours instead of squeezing them. */
    .ca-page .ca-contact-card--hours .ca-contact-row {
        flex-wrap: wrap;
        row-gap: 10px;
    }

    .ca-page .ca-contact-card--hours .ca-contact-card-body {
        flex-basis: calc(100% - 58px);
    }

    .ca-page .ca-contact-card--hours .ca-contact-status {
        margin-left: 58px;
    }

    .ca-page .ca-contact-visual {
        min-height: 290px;
    }

    .ca-page .ca-contact-cta {
        padding: 22px 20px;
    }

    .ca-page .ca-contact-cta-art {
        width: 150px;
        margin: 0;
    }

    .ca-page .ca-contact-cta-actions,
    .ca-page .ca-contact-cta-actions .ca-btn {
        width: 100%;
    }
}

/* At 320 px the e-mail column was 184 px and cargobus@cargobus.lv needs
   195 px at 17 px, so its last letter wrapped alone. Tighter row spacing
   and 16 px values give it 190 px for 184 px of text. */
@media (max-width: 359.98px) {
    .ca-page .ca-contact-row {
        gap: 12px;
        padding-right: 12px;
        padding-left: 12px;
    }

    .ca-page .ca-contact-card-value {
        font-size: 16px;
    }

    .ca-page .ca-contact-card--hours .ca-contact-card-body {
        flex-basis: calc(100% - 56px);
    }

    .ca-page .ca-contact-card--hours .ca-contact-status {
        margin-left: 56px;
    }
}

/* Tracking: the search card and its result on the left, the three stages
   a tracked shipment goes through in a dark green card on the right. The
   form reuses the home band's row, restyled for a white card. */
.ca-page .ca-track-page .ca-page-hero .ca-kicker {
    margin-bottom: 12px;
}

.ca-page .ca-track-page .ca-page-hero-lede {
    text-wrap: pretty;
}

.ca-page .ca-track-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
    gap: 24px;
}

.ca-page .ca-track-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.ca-page .ca-track-search {
    padding: 28px;
    border: 1px solid var(--ca-line);
    border-radius: var(--ca-r-lg);
    background: #fff;
    box-shadow: var(--ca-sh-3);
}

.ca-page .ca-track-page .ca-track-label {
    color: var(--ca-ink);
    font-size: 15px;
}

.ca-page .ca-track-page .ca-track-label .text-danger {
    color: var(--ca-danger) !important;
}

.ca-page .ca-track-page .ca-track-row {
    border: 1px solid var(--ca-line-2);
    background: var(--ca-g-50);
    box-shadow: none;
    transition: border-color .15s;
}

.ca-page .ca-track-page .ca-track-row:focus-within {
    border-color: var(--ca-g);
}

/* By id, to win over green-theme.css's #tracking border and yellow focus. */
.ca-page .ca-track-page #tracking {
    height: 56px;
    border: 0;
    font-size: 17px;
}

.ca-page .ca-track-page #tracking:focus {
    box-shadow: 0 0 0 3px rgba(46, 125, 50, .2);
}

.ca-page .ca-track-page .ca-track-row .ca-btn {
    height: 56px;
    padding: 0 26px;
}

.ca-page .ca-track-state {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 28px;
    border: 1px solid var(--ca-line);
    border-radius: var(--ca-r-lg);
    background: #fff;
    box-shadow: var(--ca-sh-2);
    text-align: center;
}


.ca-page .ca-track-state h2 {
    margin: 4px 0 0;
    color: var(--ca-ink);
    font-size: 20px !important;
    font-weight: 700;
    line-height: 1.4;
}

.ca-page .ca-track-state p {
    max-width: 460px;
    margin: 0;
    color: var(--ca-body);
}

.ca-page .ca-track-state .ca-btn {
    margin-top: 8px;
}

.ca-page .tracking-road.ca-card {
    padding: 24px 28px 12px;
}

.ca-page .ca-track-result-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 4px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ca-line);
}

.ca-page .ca-track-page .ca-track-result-head h2 {
    margin: 0;
    font-size: 20px !important;
}

.ca-page .ca-track-result-number {
    min-width: 0;
    padding: 4px 12px;
    border: 1px solid var(--ca-g-200);
    border-radius: 999px;
    background: var(--ca-g-50);
    color: var(--ca-g-strong);
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* Timeline: time, a dot on a rail that runs from the first event to the
   last, then the event. */
.ca-page .tracking-road .tracking-step {
    font-size: 16px;
}

.ca-page .tracking-road .tracking-step-time {
    flex: none;
    width: 72px;
    color: var(--ca-muted);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.ca-page .tracking-road .tracking-step-dot {
    flex: none;
    align-self: stretch;
    min-height: 0;
    padding: 0 22px;
}

.ca-page .tracking-road .tracking-step-dot::before {
    top: 0;
    bottom: 0;
    width: 2px;
    height: auto;
    background-color: var(--ca-g-200);
}

.ca-page .tracking-road .ca-track-result-head + .tracking-step .tracking-step-dot::before {
    top: 50%;
}

.ca-page .tracking-road .tracking-step:last-child .tracking-step-dot::before {
    bottom: 50%;
}

.ca-page .tracking-road .tracking-step-dot::after {
    width: 16px;
    height: 16px;
    border: 3px solid var(--ca-g);
    background-color: #fff;
    box-shadow: 0 0 0 4px var(--ca-g-100);
}

.ca-page .tracking-road .tracking-step-details {
    flex: 1;
    min-width: 0;
    padding: 16px 0;
}

.ca-page .tracking-road .tracking-step + .tracking-step .tracking-step-details {
    border-top: 1px solid var(--ca-line);
}

.ca-page .tracking-road .tracking-step-date {
    margin-bottom: 4px !important;
    color: var(--ca-ink);
    font-size: 15px;
}

.ca-page .tracking-road .tracking-step-info {
    color: var(--ca-body);
    overflow-wrap: anywhere;
}

.ca-page .tracking-road .tracking-step-location {
    color: var(--ca-muted);
}

/* Stays in view beside a long timeline. */
.ca-page .ca-track-aside {
    position: sticky;
    top: 24px;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-self: start;
    padding: 28px 28px 0;
    border-radius: var(--ca-r-lg);
    background-color: var(--ca-g-deep);
    background-image:
        radial-gradient(420px 320px at 85% 0%, rgba(76, 160, 82, .5), transparent 60%),
        linear-gradient(150deg, #1f6b25, #14471a);
    box-shadow: var(--ca-sh-3);
    color: var(--ca-on-dark);
}

.ca-page .ca-track-page .ca-track-aside h2 {
    margin: 0 0 22px;
    color: #fff;
    font-size: 20px !important;
    font-weight: 700;
}

.ca-page .ca-track-steps {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The rail behind the three icons. */
.ca-page .ca-track-steps::before {
    content: "";
    position: absolute;
    left: 21px;
    top: 22px;
    bottom: 22px;
    width: 2px;
    background: rgba(185, 228, 188, .35);
}

.ca-page .ca-track-steps li {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.ca-page .ca-track-steps-ic {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ca-g-mint);
    color: var(--ca-g-deep);
    font-size: 17px;
}

.ca-page .ca-track-steps-copy {
    min-width: 0;
    font-size: 15px;
    line-height: 1.5;
}

.ca-page .ca-track-steps-copy b {
    display: block;
    margin-bottom: 2px;
    color: #fff;
    font-size: 16px;
}

.ca-page .ca-track-aside-art {
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
    margin: 20px -8px 0 auto;
    filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .3));
}

/* The tracking panel's van drives in the same way once the panel is seen. */
.ca-page .ca-track-aside.ca-arrive-armed .ca-track-aside-art {
    transform: translateX(-130%);
}

.ca-page .ca-track-aside.ca-arrive-inview .ca-track-aside-art {
    transform-origin: 50% 100%;
    animation: ca-track-arrive 1.4s cubic-bezier(.25, .8, .3, 1) both;
}

@keyframes ca-track-arrive {
    0% {
        transform: translateX(-130%);
    }

    70% {
        transform: translateX(2%);
    }

    85% {
        transform: translateX(-.5%) rotate(.6deg);
    }

    100% {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ca-page .ca-visual.ca-v-armed .ca-cb-art,
    .ca-page .ca-visual.ca-v-inview .ca-cb-art,
    .ca-page .ca-track-aside.ca-arrive-armed .ca-track-aside-art,
    .ca-page .ca-track-aside.ca-arrive-inview .ca-track-aside-art {
        transform: none;
        animation: none;
    }
}

@media (max-width: 991.98px) {
    .ca-page .ca-track-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .ca-page .ca-track-aside {
        position: static;
    }
}

@media (max-width: 576px) {
    .ca-page .ca-track-search {
        padding: 20px;
    }

    .ca-page .tracking-road.ca-card {
        padding: 20px 18px 8px;
    }

    .ca-page .tracking-road .tracking-step {
        font-size: 15px;
    }

    .ca-page .tracking-road .tracking-step-time {
        width: 60px;
        font-size: 13px;
    }

    .ca-page .tracking-road .tracking-step-dot {
        padding: 0 16px;
    }

    .ca-page .ca-track-aside {
        padding: 24px 20px 0;
    }

    .ca-page .ca-track-aside-art {
        max-width: 280px;
    }
}

/* Required-field asterisks: Bootstrap's red is 3.7:1 on white. */
.ca-page:where(:not(.ca-shell, .ca-wizard-page)) main .text-danger {
    color: var(--ca-danger) !important;
}

/* Notices on the public pages: brand-tinted, rounded like the cards. */
.ca-page:where(:not(.ca-shell, .ca-wizard-page)) main .alert {
    border-radius: var(--ca-r) !important;
    font-size: 14px;
}

.ca-page:where(:not(.ca-shell, .ca-wizard-page)) main .alert-info {
    border: 1px solid var(--ca-g-200) !important;
    background: var(--ca-g-50) !important;
    color: var(--ca-ink) !important;
}

.ca-page:where(:not(.ca-shell, .ca-wizard-page)) main .alert-danger {
    border: 1px solid #f1c9c6 !important;
    background: #fdecea !important;
    color: var(--ca-danger-ink) !important;
}

.ca-page:where(:not(.ca-shell, .ca-wizard-page)) main .alert-success {
    border: 1px solid var(--ca-g-200) !important;
    background: var(--ca-g-100) !important;
    color: var(--ca-g-deep) !important;
}

/* Fields the recovery and reset forms flag after a refused submit. */
.ca-page:where(:not(.ca-shell, .ca-wizard-page)) main .form-control.border-danger {
    border-color: #d93025 !important;
}

.ca-page:where(:not(.ca-shell, .ca-wizard-page)) main .form-control.border-danger:focus {
    box-shadow: 0 0 0 4px rgba(217, 48, 37, .14);
}

/* ---------- responsive ---------- */
@media (max-width: 1199.98px) {
    .ca-page .ca-hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(400px, 460px);
        column-gap: 40px;
    }
}

/* One column: copy, then the card at full container width (no empty
   green column beside it), then checks and carriers. */
@media (max-width: 991.98px) {
    .ca-page {
        --ca-sec-y: 80px;
    }

    /* mobile-responsive.css pads the body to clear the fixed CTA bar, which
       left a light strip under the footer; the footer carries it instead. */
    body.ca-page {
        padding-bottom: 0;
    }

    .ca-page .ca-footer {
        padding-bottom: calc(112px + env(safe-area-inset-bottom));
    }

    .ca-page .ca-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "copy" "form" "more";
        row-gap: 40px;
        padding-top: 32px;
        padding-bottom: 96px;
    }

    .ca-page .ca-hero-copy {
        max-width: 720px;
    }

    .ca-page .ca-checks {
        margin-top: 0;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ca-page .ca-checks li {
        flex-direction: column;
        gap: 10px;
    }

    .ca-page .ca-feature,
    .ca-page .ca-acc,
    .ca-page .ca-track-card {
        grid-template-columns: minmax(0, 1fr);
        gap: 48px;
    }

    .ca-page .ca-why-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ca-page .ca-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ca-page .ca-footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .ca-page {
        --ca-sec-y: 64px;
    }

    .ca-page .ca-container,
    .ca-page .ca-announce .announcement-spotlight > .container,
    body.ca-page:where(:not(.ca-shell)) > .container,
    .ca-page:where(:not(.ca-shell)) main > .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .ca-page:where(:not(.ca-shell)) main {
        padding: 28px 0 48px;
    }


    .ca-page .ca-brand-crop {
        transform: scale(.86);
        transform-origin: left center;
    }

    .ca-page .ca-hero-grid {
        padding-top: 20px;
        padding-bottom: 88px;
    }

    .ca-page .ca-hero h1 {
        margin-top: 20px;
    }

    .ca-page .ca-checks {
        grid-template-columns: minmax(0, 1fr);
    }

    .ca-page .ca-checks li {
        flex-direction: row;
        gap: 14px;
    }

    .ca-page .ca-quote {
        padding: 20px;
        border-radius: 22px;
    }

    .ca-page .ca-quote::before {
        display: none;
    }

    .ca-page .ca-seg button {
        min-height: 60px;
        font-size: 12.5px;
    }

    .ca-page .ca-row-3 {
        gap: 8px;
    }

    .ca-page .ca-logo-row {
        gap: 6px;
    }

    /* 64px tiles at the desktop height: the old 44x38 tiles left 20px
       logos that could not be read. Seven of them wrap on a phone. */
    .ca-page .ca-carriers .ca-logo-tile {
        width: 64px;
    }

    .ca-page .ca-announce {
        margin-top: -48px;
    }

    .ca-page .ca-results {
        padding: 40px 20px 0;
    }

    .ca-page .ca-results-head {
        padding: 40px 20px 0;
    }

    .ca-page .ca-results-head + .ca-results {
        padding-top: 24px;
    }

    .ca-page .ca-sec-head {
        margin-bottom: 40px;
    }

    .ca-page .ca-sec-head p,
    .ca-page .ca-lead {
        font-size: 17px;
    }

    .ca-page .ca-steps {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .ca-page .ca-steps::before {
        top: 16%;
        bottom: 16%;
        left: 55px;
        right: auto;
        width: 2px;
        height: auto;
        background: repeating-linear-gradient(180deg, var(--ca-g-300) 0 6px, transparent 6px 14px);
    }

    .ca-page .ca-step {
        padding: 24px;
    }

    .ca-page .ca-visual {
        padding: 20px;
        border-radius: 22px;
    }

    .ca-page .ca-why-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ca-page .ca-why-item {
        display: grid;
        grid-template-columns: 44px 1fr;
        column-gap: 16px;
        padding: 22px 20px;
    }

    .ca-page .ca-why-ic {
        grid-row: span 2;
        width: 44px;
        height: 44px;
        margin: 0;
        font-size: 17px;
    }

    .ca-page .ca-why-item h3 {
        margin-bottom: 4px;
        font-size: 17px !important;
    }

    .ca-page .ca-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .ca-page .ca-tabs button {
        min-width: 0;
        padding: 0 10px;
        font-size: 14px;
        overflow-wrap: anywhere;
    }

    .ca-page .ca-acc-visual {
        min-height: 0;
        padding: 24px;
        border-radius: 22px;
    }

    .ca-page .ca-float-tag {
        display: none;
    }

    .ca-page .ca-track-card {
        gap: 28px;
        padding: 32px 24px;
        border-radius: 22px;
    }

    .ca-page .ca-track-row {
        flex-direction: column;
    }

    .ca-page .ca-track-row .ca-btn {
        width: 100%;
    }

    .ca-page .ca-btn-row .ca-btn {
        flex: 1 1 auto;
    }

    .ca-page .ca-footer {
        padding-top: 56px;
    }

    .ca-page .ca-footer-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    .ca-page .ca-footer-bottom {
        flex-direction: column;
    }

    .ca-page:where(:not(.ca-shell)) .ca-auth-aside,
    .ca-page:where(:not(.ca-shell)) main .form-wrap,
    .ca-page:where(:not(.ca-shell)) main > .container .bg-white.rounded.shadow-sm {
        padding: 20px !important;
    }
}

/* Phone footer: link groups in two columns with 44px rows, so every link
   is a comfortable target and the footer stays short. */
@media (max-width: 576px) {
    .ca-page .ca-footer {
        padding-top: 36px;
        font-size: 14px;
    }

    .ca-page .ca-footer-grid {
        gap: 20px;
    }

    .ca-page .ca-footer-brand p {
        margin-top: 6px;
        font-size: 13.5px;
        line-height: 1.5;
    }

    .ca-page .ca-footer-heading {
        margin-bottom: 2px;
        font-size: 12px !important;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .ca-page .ca-footer-grid ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 16px;
    }

    .ca-page .ca-footer-grid li,
    .ca-page .ca-footer-contact li {
        display: flex;
        align-items: center;
        min-width: 0;
        min-height: 44px;
    }

    .ca-page .ca-footer-grid a,
    .ca-page .ca-footer-bottom a {
        display: inline-flex;
        align-items: center;
        min-width: 44px;
        min-height: 44px;
        overflow-wrap: anywhere;
    }

    .ca-page .ca-footer-contact li {
        line-height: 1.35;
    }

    .ca-page .ca-footer-bottom {
        gap: 0;
        margin-top: 16px;
        padding-top: 10px;
        font-size: 13px;
    }

    .ca-page .ca-footer-bottom ul {
        gap: 0 20px;
    }
}

/* Offer cards on phones: the select button spans the card under the
   price; the empty state stacks its contact buttons. */
@media (max-width: 575.98px) {
    .ca-page .offer .ca-offer-title h6 {
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    .ca-page .offer .offer-footer {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .ca-page .offer .offer-footer .select-btn {
        width: 100% !important;
        margin-left: 0;
    }

    .ca-page .ca-empty {
        padding: 24px 18px 22px;
    }

    .ca-page .ca-empty-actions {
        flex-direction: column;
        align-self: stretch;
    }
}

/* Each route leg stacks country over postcode at full width; the swap
   button stays on the dashed line between the legs. */
@media (max-width: 479.98px) {
    .ca-page .ca-leg-row {
        grid-template-columns: minmax(0, 1fr);
        padding-right: 0;
    }

    .ca-page .ca-leg + .ca-swap + .ca-leg {
        margin-top: 28px;
        padding-top: 28px;
    }

    .ca-page .ca-seg button {
        padding: 8px 4px;
        font-size: 12px;
    }
}

/* At 320px Russian "Документы" is 70px against 69px of tile, so it broke
   inside the word (or hyphenated, depending on the browser). Two pixels of
   side padding fit every label whole. */
@media (max-width: 339.98px) {
    .ca-page .ca-seg button {
        padding-left: 2px;
        padding-right: 2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* Keep the main-content override above the legacy submit selectors. */
    .ca-page main#main *,
    .ca-page main#main *::before,
    .ca-page main#main *::after,
    .ca-page *,
    .ca-page *::before,
    .ca-page *::after {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}

/* Checkboxes are at least 24px square (WCAG 2.5.8 target size). Bootstrap's
   1em box measured 16-18px on the terms and consent boxes. Switches keep
   their own sizing. */
.ca-page .form-check-input[type="checkbox"]:not([role="switch"]) {
    width: 24px;
    height: 24px;
    margin-top: 0;
}

.ca-page .form-check:has(> .form-check-input[type="checkbox"]:not([role="switch"])) {
    padding-left: 32px;
}

.ca-page .form-check > .form-check-input[type="checkbox"]:not([role="switch"]) {
    margin-left: -32px;
}

/* ---------- announcement strip on phones ---------- */
/* green-theme.css wraps the strip on phones: icon, five lines of text and a
   full-width pill made it about 186px tall. Here it is one row: a small
   icon, the text on one truncated line, a compact pill and the close button.
   A tap on the text (concept-a.js) sets .is-expanded to show all of it; the
   text also sits in the title attribute. */
@media (max-width: 576px) {
    .ca-page .announcement-bar {
        font-size: .85rem;
    }

    .ca-page .announcement-bar__inner {
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .ca-page .announcement-bar__icon {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .ca-page .announcement-bar__text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        flex: 1 1 0;
        min-width: 0;
        overflow: hidden;
        line-height: 1.35;
        cursor: pointer;
    }

    .ca-page .announcement-bar.is-expanded .announcement-bar__text {
        display: block;
        -webkit-line-clamp: unset;
        overflow: visible;
    }

    /* Expanded: the text gets the full row, the pill drops under it. */
    .ca-page .announcement-bar.is-expanded .announcement-bar__inner {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .ca-page .announcement-bar.is-expanded .announcement-bar__text {
        flex-basis: calc(100% - 28px - 32px - 16px);
    }

    .ca-page .announcement-bar.is-expanded .announcement-bar__close {
        order: 1;
    }

    .ca-page .announcement-bar.is-expanded .announcement-bar__cta {
        order: 2;
        margin-left: 36px;
    }

    .ca-page .announcement-bar__close {
        order: 0;
        width: 44px;
        height: 44px;
    }

    .ca-page .announcement-bar__cta {
        order: 0;
        max-width: 8.5rem;
        margin-left: 0;
        padding: .3rem .75rem;
        overflow: hidden;
        font-size: .8rem;
        text-overflow: ellipsis;
    }
}

/* Brand pass: the default (green) announcement strip is a light mint band with
   dark text instead of a second dark-green band under the header, so the top
   of every page is no longer one slab of green. The orange and dark themes an
   admin can choose keep their own look. The CTAs share the site's button
   radius rather than being the only pills. */
.ca-page .ann-theme-green .announcement-bar {
    background: var(--ca-g-100);
    color: var(--ca-g-deep);
    border-bottom: 1px solid var(--ca-g-200);
    box-shadow: none;
}

.ca-page .ann-theme-green .announcement-bar__body {
    opacity: 1;
    color: var(--ca-body);
}

.ca-page .ann-theme-green .announcement-bar__icon {
    background: #fff;
    color: var(--ca-g);
    box-shadow: 0 1px 2px rgba(15, 26, 18, .08);
}

.ca-page .ann-theme-green .announcement-bar__close {
    color: var(--ca-g-deep);
}

.ca-page .ann-theme-green .announcement-bar__close:hover,
.ca-page .ann-theme-green .announcement-bar__close:focus-visible {
    background: rgba(20, 71, 26, .1);
}

.ca-page .ann-theme-green .announcement-bar__cta {
    background: var(--ca-g);
    color: #fff;
}

.ca-page .ann-theme-green .announcement-bar__cta:hover,
.ca-page .ann-theme-green .announcement-bar__cta:focus-visible {
    background: var(--ca-g-strong);
    color: #fff;
}

.ca-page .announcement-bar__cta,
.ca-page .announcement-spotlight__cta {
    border-radius: 12px;
}

.ca-page .announcement-bar a:focus-visible,
.ca-page .announcement-bar button:focus-visible {
    outline: 3px solid var(--ca-focus);
    outline-offset: 2px;
}

.ca-page .ann-theme-dark .announcement-bar a:focus-visible,
.ca-page .ann-theme-dark .announcement-bar button:focus-visible {
    outline-color: #fff;
}

/* Carrier strip on narrow phones: two rows of tiles that fill the width
   (4 + 3) instead of one row of seven. */
@media (max-width: 480px) {
    .ca-page .ca-carriers .ca-logo-row {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .ca-page .ca-carriers .ca-logo-tile {
        width: auto;
    }
}

/* One button radius: Bootstrap's success buttons kept their 6px corners on the
   sign-in, registration and orders pages next to the 12px .ca-btn system. */
.ca-page .btn-success:not(#ca-x) {
    border-radius: 12px !important;
}

/* ---------- password reset: one focused card ---------- */
.ca-page .ca-reset {
    display: flex;
    justify-content: center;
    padding-top: 56px !important;
    padding-bottom: 72px !important;
}

.ca-page .ca-reset-card {
    width: 100%;
    max-width: 460px;
    padding: 36px 36px 28px;
    border: 1px solid var(--ca-line);
    border-radius: var(--ca-r-lg);
    background: #fff;
    box-shadow: var(--ca-sh-2);
}

.ca-page .ca-reset-ic {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    border-radius: var(--ca-r);
    background: var(--ca-g-50);
    color: var(--ca-g-strong);
    font-size: 19px;
}

.ca-page .ca-reset-title {
    margin: 0 0 6px;
    color: var(--ca-ink);
    font-size: 26px !important;
    font-weight: 700;
    letter-spacing: -.02em;
}

.ca-page .ca-reset-lede {
    margin: 0 0 24px;
    color: var(--ca-body);
    font-size: 15px;
}

.ca-page .ca-reset-field {
    margin-bottom: 16px;
}

.ca-page .ca-reset-pass {
    position: relative;
}

.ca-page .ca-reset-pass .form-control {
    padding-right: 52px !important;
}

.ca-page .ca-reset-eye {
    position: absolute;
    top: 50%;
    right: 2px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    transform: translateY(-50%);
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ca-body);
}

.ca-page .ca-reset-eye:hover {
    background: var(--ca-g-50);
    color: var(--ca-g-strong);
}

.ca-page .ca-reset-eye:focus-visible {
    outline: 2px solid var(--ca-focus);
    outline-offset: 1px;
}

/* The two rules the server checks, ticked green as they are met. */
.ca-page .ca-reset-rules {
    display: grid;
    gap: 6px;
    margin: 4px 0 22px;
    padding: 0;
    list-style: none;
    color: var(--ca-body);
    font-size: 13px;
}

.ca-page .ca-reset-rules li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ca-page .ca-reset-rules i {
    color: var(--ca-line-2);
    transition: color .15s;
}

.ca-page .ca-reset-rules li.is-met {
    color: var(--ca-g-deep);
}

.ca-page .ca-reset-rules li.is-met i {
    color: var(--ca-g);
}

.ca-page .ca-reset-submit {
    width: 100%;
    height: 48px;
}

.ca-page .ca-reset-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 16px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--ca-line);
    color: var(--ca-body);
    font-size: 13px;
}

.ca-page .ca-reset-foot a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--ca-g-strong);
    font-weight: 600;
    text-decoration: none;
}

.ca-page .ca-reset-foot a:hover {
    text-decoration: underline;
}

.ca-page .ca-reset-foot a i {
    margin-right: 6px;
}

@media (max-width: 575.98px) {
    .ca-page .ca-reset {
        padding-top: 24px !important;
    }

    .ca-page .ca-reset-card {
        padding: 28px 22px 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ca-page .ca-reset-rules i {
        transition: none;
    }
}

/* ---------- illustration set (clay style of the hero) ---------- */
/* Each spot gets its own picture instead of the hero van everywhere. */
.ca-page .ca-track-state-art {
    display: block;
    width: 150px;
    height: auto;
    margin: 0 auto 4px;
}

.ca-page .ca-track-state--notfound .ca-track-state-art {
    width: 120px;
}

.ca-page .ca-error-art {
    display: block;
    width: 132px;
    height: auto;
    margin: 0 auto 14px;
}


/* The Cargobus truck stands whole above the card stack, its contact shadow
   on the panel; no card covers its wheels or tail lift. */
.ca-page .ca-cb-art {
    display: block;
    width: min(80%, 340px);
    height: auto;
    margin: -8px 0 10px auto;
}

@media (max-width: 575.98px) {
    .ca-page .ca-cb-art {
        width: 270px;
    }
}

/* Loading placeholders in the offer card's shape (QA-06): logo, two lines,
   a footer with the price and the button. */
.ca-page .offer-skeleton {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    min-height: 185px;
    margin: 0;
    padding: 20px;
    border: 1px solid var(--ca-line);
    border-radius: var(--ca-r-lg);
    background: #fff;
    box-shadow: var(--ca-sh-1);
}

.ca-page .offer-skeleton-head {
    display: flex;
    gap: 14px;
}

.ca-page .offer-skeleton-logo,
.ca-page .offer-skeleton-btn {
    flex: none;
    border-radius: 14px;
    background: var(--ca-g-50);
}

.ca-page .offer-skeleton-logo {
    width: 88px;
    height: 60px;
}

.ca-page .offer-skeleton-lines {
    flex: 1;
    padding-top: 8px;
}

.ca-page .offer-skeleton-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--ca-line);
}

.ca-page .offer-skeleton-foot .offer-skeleton-line {
    margin: 0;
}

.ca-page .offer-skeleton-btn {
    width: 150px;
    height: 48px;
    border-radius: 12px;
}

@media (max-width: 575.98px) {
    .ca-page .offer-skeleton-logo {
        width: 72px;
        height: 52px;
    }
}

/* Same width rules as the cards: below 360px of content the footer stacks
   (price, then a full-width button) and the card grows; below 320px the
   meta row sits under the logo too. */
@container (max-width: 359px) {
    .ca-page .offer-skeleton-foot {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .ca-page .offer-skeleton-foot .offer-skeleton-line {
        height: 22px;
    }

    .ca-page .offer-skeleton-btn {
        width: 100%;
    }

    .ca-page .offer-skeleton-lines {
        min-height: 120px;
    }
}

@container (max-width: 320px) {
    .ca-page .offer-skeleton-lines {
        min-height: 160px;
    }
}

/* Calculator field errors: the message under its field and a linked summary
   above the search button (QA-03). Text 7.97:1 on the tint. */
.ca-page .ca-field-error {
    margin: 6px 0 0;
    color: var(--ca-danger);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
}

.ca-page .ca-input[aria-invalid="true"] {
    border-color: var(--ca-danger);
}

.ca-page .ca-input[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 4px rgba(179, 38, 30, .14);
}

.ca-page .ca-quote-errors {
    margin: 4px 0 14px;
    padding: 12px 14px;
    border: 1px solid #f1c4c0;
    border-left: 4px solid var(--ca-danger);
    border-radius: 12px;
    background: #fdecea;
    color: var(--ca-danger-ink);
    font-size: 14px;
    line-height: 1.45;
}

.ca-page .ca-quote-errors ul {
    margin: 0;
    padding-left: 18px;
}

.ca-page .ca-quote-errors a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

.ca-page .ca-quote-errors:focus-visible,
.ca-page .ca-quote-errors:focus {
    outline: 3px solid var(--ca-focus);
    outline-offset: 2px;
}

/* The announcement's expand button shows only where the text is truncated. */
.ca-page .announcement-bar__more {
    display: none;
}

@media (max-width: 576px) {
    .ca-page .announcement-bar__more {
        display: inline-grid;
        flex: none;
        place-items: center;
        width: 44px;
        height: 44px;
        margin: 0 -8px;
        padding: 0;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: inherit;
        font-size: 12px;
    }

    .ca-page .announcement-bar__more i {
        transition: transform .2s;
    }

    .ca-page .announcement-bar.is-expanded .announcement-bar__more i {
        transform: rotate(180deg);
    }

    .ca-page .announcement-bar.is-expanded .announcement-bar__more {
        order: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ca-page .announcement-bar__more i {
        transition: none;
    }
}

/* A disabled button reads as unavailable: half opacity, no lift, no glow. */
.ca-page .ca-btn:disabled,
.ca-page .ca-btn:disabled:hover,
.ca-page .ca-btn[aria-disabled="true"],
.ca-page .ca-btn[aria-disabled="true"]:hover {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* On phones the "Izvēlne" links sit in the open menu directly, not in a
   second menu inside it. */
@media (max-width: 991.98px) {
    .ca-page .ca-nav-links > .dropdown > .dropdown-toggle {
        display: none;
    }

    .ca-page .ca-nav-links > .dropdown > .dropdown-menu {
        position: static;
        display: block;
        margin: 0;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .ca-page .ca-nav-links > .dropdown > .dropdown-menu .dropdown-divider,
    .ca-page .ca-nav-links > .dropdown > .dropdown-menu .dropdown-item i {
        display: none;
    }

    /* Same row as the other menu links (the old theme pads dropdown items
       with !important). */
    .ca-page .ca-nav-links > .dropdown > .dropdown-menu .dropdown-item {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 12px 15px !important;
        border-radius: 10px;
        color: var(--ca-on-dark);
        font-size: 16px !important;
        font-weight: 500;
    }

    .ca-page .ca-nav-links > .dropdown > .dropdown-menu .dropdown-item:hover,
    .ca-page .ca-nav-links > .dropdown > .dropdown-menu .dropdown-item:focus-visible {
        background: rgba(255, 255, 255, .1);
        color: #fff;
    }
}

/* The phone menu button turns into a close button while the menu is open. */
.ca-page .ca-toggler .ca-toggler-close,
.ca-page .ca-toggler[aria-expanded="true"] .ca-toggler-open {
    display: none;
}

.ca-page .ca-toggler[aria-expanded="true"] .ca-toggler-close {
    display: inline-block;
}

/* Popup footer: choose this offer without going back to its card. */
.ca-page .ca-om-foot {
    padding: 0 24px 22px;
    border-top: 0;
}

.ca-page .ca-om-foot .ca-btn {
    width: 100%;
}

/* Recovery uses the reset card; its section label sits above the title. */
.ca-page .ca-reset-card .ca-kicker {
    display: flex;
    margin-bottom: 6px;
}

/* A validated phone field already has a green border, so its focus needs a
   ring that stands out on its own (the soft tint read 1.2:1). */
.ca-page .phone-input.is-valid:focus,
.ca-page .phone-input.is-invalid:focus {
    outline: 3px solid var(--ca-focus);
    outline-offset: 1px;
}

/* ---------- phase 2: calculator on a phone ----------
   Same fields, tighter composition: the route reads as one row (from, swap,
   to) with country above postcode in each leg, and the search button follows
   the last input. Nothing price-relevant is hidden. */
@media (max-width: 760px) {
    .ca-page .ca-quote {
        padding: 16px;
    }

    .ca-page .ca-quote-head {
        margin-bottom: 12px;
    }

    .ca-page .ca-quote-head h2 {
        font-size: 18px !important;
    }

    .ca-page .ca-quote .ca-label {
        margin-bottom: 4px !important;
    }

    .ca-page .ca-seg button {
        min-height: 52px;
        gap: 3px;
    }

    .ca-page .ca-seg button img {
        width: 36px;
        height: 36px;
    }

    .ca-page .ca-row {
        gap: 8px;
        margin-top: 10px;
    }

    .ca-page .ca-input {
        height: 44px;
    }

    .ca-page .ca-route {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
        column-gap: 6px;
        margin-top: 12px;
        padding: 12px 0 0;
        border: 0;
        border-top: 1px solid var(--ca-line);
        border-radius: 0;
        background: none;
    }

    .ca-page .ca-leg + .ca-swap + .ca-leg {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }

    .ca-page .ca-leg-title {
        margin-bottom: 6px;
    }

    .ca-page .ca-leg-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        padding-right: 0;
    }

    .ca-page .ca-swap {
        position: static;
        align-self: start;
        margin-top: 50px;
        transform: none;
    }

    .ca-page #find-offers {
        height: 52px;
        margin-top: 14px !important;
    }

    .ca-page .ca-quote-foot {
        margin-top: 10px;
    }
}

/* Too narrow for two legs side by side: they stack, each with country over
   postcode, and the swap button sits at the right of the first leg title. */
@media (max-width: 359.98px) {
    .ca-page .ca-route {
        display: block;
        position: relative;
    }

    .ca-page .ca-leg + .ca-swap + .ca-leg {
        margin-top: 12px;
    }

    .ca-page .ca-leg:first-child .ca-leg-title {
        min-height: 44px;
        margin-bottom: 0;
    }

    .ca-page .ca-swap {
        position: absolute;
        right: 0;
        top: 12px;
        margin-top: 0;
        transform: none;
    }
}

/* ---------- phase 2: calmer supporting sections ----------
   The steps and benefits are plain columns under a single rule instead of
   cards with a border, tint, shadow and gradient icon each. Strong emphasis
   stays with the calculator, the selected state, prices and the main action. */
.ca-page .ca-steps::before {
    display: none;
}

.ca-page .ca-step,
.ca-page .ca-why-item {
    padding: 24px 0 0;
    border: 0;
    border-top: 1px solid var(--ca-line-2);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.ca-page .ca-step:hover,
.ca-page .ca-why-item:hover {
    border-color: var(--ca-line-2);
    box-shadow: none;
    transform: none;
}

.ca-page .ca-step-ic,
.ca-page .ca-why-ic {
    background: var(--ca-g-100);
    color: var(--ca-g-strong);
    box-shadow: none;
}

.ca-page .ca-step-n {
    background: transparent;
    padding: 0;
}

.ca-page .ca-why-grid {
    gap: 24px 32px;
}

@media (max-width: 760px) {
    .ca-page .ca-steps {
        gap: 0;
    }

    .ca-page .ca-step {
        padding: 20px 0;
    }

    .ca-page .ca-why-grid {
        gap: 0;
    }

    .ca-page .ca-why-item {
        padding: 18px 0;
    }

    .ca-page .ca-track-row {
        box-shadow: none;
    }
}

/* ---------- phase 2: tracking leads with the latest status ---------- */
.ca-page .ca-track-latest {
    display: grid;
    gap: 4px;
    padding-bottom: 20px;
}

.ca-page .ca-track-latest p {
    margin: 0;
}

.ca-page .ca-track-latest .ca-track-latest-title {
    margin: 0 0 4px;
    color: var(--ca-muted);
    font-size: 13px !important;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ca-page .ca-track-latest-status {
    color: var(--ca-g-deep);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.ca-page .ca-track-latest-where {
    color: var(--ca-ink);
    font-size: 17px;
    font-weight: 600;
}

.ca-page .ca-track-latest-updated {
    color: var(--ca-muted);
    font-size: 14px;
}

.ca-page .ca-track-latest-help {
    justify-self: start;
    margin-top: 8px;
    color: var(--ca-g-strong);
    font-size: 15px;
    font-weight: 600;
    text-underline-offset: 3px;
}

.ca-page .ca-track-events {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ca-page .tracking-road .ca-track-events > .tracking-step:first-child .tracking-step-dot::before {
    top: 50%;
}

/* Touch targets up to 768 px (design loop round 1, S2). The footer links get
   real 44 px rows, as below 576 px already, because their neighbours sit close.
   The hero pill keeps its 32 px look; nothing is next to it, so an invisible
   frame makes its tap area 44 px. */
@media (max-width: 768px) {
    .ca-page .ca-footer-grid li,
    .ca-page .ca-footer-contact li {
        min-height: 44px;
    }

    .ca-page .ca-footer-grid a,
    .ca-page .ca-footer-bottom a {
        display: inline-flex;
        align-items: center;
        min-width: 44px;
        min-height: 44px;
    }

    .ca-page .ca-eyebrow {
        position: relative;
    }

    .ca-page .ca-eyebrow::after {
        content: "";
        position: absolute;
        inset: -7px 0;
    }

    /* The login/registration secondary links get 10 px padding below 576 px
       (mobile-responsive.css); the same tap height up to 768 px. */
    .ca-page main a.text-success.fw-semibold {
        padding-top: 9px;
        padding-bottom: 9px;
    }

    /* Registration terms row: the one-line label was 26 px tall at 768 px.
       The label grows to 44 px and the box moves down by the same 9 px, so
       it still lines up with the first line of text. */
    .ca-page .form-check:has(> .form-check-input[type="checkbox"]:not([role="switch"])) > .form-check-label {
        display: block;
        padding-top: 9px;
        padding-bottom: 9px;
    }

    .ca-page .form-check > .form-check-input[type="checkbox"]:not([role="switch"]) {
        margin-top: 9px;
    }
}

/* Contact page: the e-mail card lists two addresses, each its own 44 px link. */
.ca-page .ca-contact-mail {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: var(--ca-ink);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.ca-page .ca-contact-mail:hover {
    color: var(--ca-g-strong);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Font Awesome's stylesheet loads without blocking the page, so icons start
   0 px wide and push their row around when it arrives (design loop round 1:
   wizard step 2 RU CLS 0.21, order detail 0.13 at 390 px; 0 with the icon
   CSS blocked). Reserve the width where it moved things: offer meta icons
   are all 1em glyphs; status badge icons vary, so Font Awesome's 1.25em. */
.ca-page .offer .ca-offer-eta > i,
.ca-page .offer .tracking-status i,
.ca-page .offer i.fa-circle-check,
.ca-page .offer i.fa-circle-xmark {
    display: inline-block;
    width: 1em;
    text-align: center;
}

.ca-page .badge > i[class*="fa-"] {
    display: inline-block;
    width: 1.25em;
    text-align: center;
}