/* The homepage's closing call to action (central/partials/home/cta.blade.php), in the
   shape of Rio's reference (2026-10-13, Hike's "Ready to get started") and the homepage's
   dark-card geometry (armpos-e5's "how it works": outer 0 24px, at most 1392px, radius
   28px; 0 8px and 20px from 639px down). Tokens from landing-home.css: on navy, headings
   --h-on-dark, copy --h-on-dark-text, ticks --h-accent-on-dark; the green button with
   navy text. */

.h-cta2 {
    padding: 96px 24px;
}

.h-cta2__card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    max-width: 1392px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 28px;
    background:
        radial-gradient(ellipse 60% 70% at 0% 0%, rgb(31 133 79 / 0.6), rgb(26 105 68 / 0.24) 45%, transparent 78%),
        var(--h-950);
    box-shadow: 0 48px 90px -48px rgb(21 30 49 / 0.6);
}

/* Right to left, the words start at the right: the glow follows them */
[dir="rtl"] .h-cta2__card {
    background:
        radial-gradient(ellipse 60% 70% at 100% 0%, rgb(31 133 79 / 0.6), rgb(26 105 68 / 0.24) 45%, transparent 78%),
        var(--h-950);
}

.h-cta2__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 80px clamp(32px, 6vw, 96px);
}

.h-cta2__chip {
    margin: 0;
    padding: 7px 15px;
    border: 1px solid rgb(102 208 151 / 0.42);
    border-radius: 999px;
    background: rgb(102 208 151 / 0.1);
    /* green-300, not the accent: over the glow's brightest corner the accent read 4.27 on
       a tablet (measured, cta_contrast.py) */
    color: var(--h-300);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

/* Letter spacing only for Latin scripts, as the bento's eyebrow */
.h-cta2__chip:is(:lang(en), :lang(fr), :lang(es), :lang(pt), :lang(de), :lang(tr)) {
    letter-spacing: 0.08em;
}

.h-cta2__title {
    margin: 22px 0 0;
    font-family: "IBM Plex Sans", "Geist", ui-sans-serif, system-ui, sans-serif;
    font-size: clamp(34px, 3.4vw, 52px);
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--h-on-dark);
    text-wrap: balance;
}

.h-cta2__sub {
    max-width: 32em;
    margin: 18px 0 0;
    color: var(--h-on-dark-text);
    font-size: 18px;
    line-height: 1.6;
}

.h-cta2__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 36px;
}

.h-cta2__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 30px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.h-cta2__btn--solid {
    background: var(--h-400);
    color: var(--h-950);
    box-shadow: 0 16px 32px -16px rgb(97 206 112 / 0.8);
}

.h-cta2__btn--solid:hover {
    background: var(--h-300);
    color: var(--h-950);
}

.h-cta2__btn--ghost {
    border-color: rgb(216 246 238 / 0.42);
    color: var(--h-on-dark);
}

.h-cta2__btn--ghost:hover {
    border-color: var(--h-on-dark);
    background: rgb(216 246 238 / 0.06);
    color: var(--h-on-dark);
}

.h-cta2__btn:focus-visible {
    outline: 2px solid var(--h-accent-on-dark);
    outline-offset: 3px;
}

/* The checks stay on one line (Rio, 2026-10-14: "keep these in one row/ one line for all
   devices mobile and desktop"). home-cta.js sets --fit below 1 only when that language's row is
   wider than the column, and the text, ticks and gaps shrink together; it stops at 10px text
   and lets the row wrap rather than go smaller. Without the script the row wraps as before. */
.h-cta2__facts {
    --fit: 1;
    --facts-gap: 26px;
    --facts-icon: 16px;
    --facts-icon-gap: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px calc(var(--facts-gap) * var(--fit));
    max-width: 100%;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
    color: var(--h-on-dark);
    font-size: calc(14px * var(--fit));
    font-weight: 500;
}

.h-cta2__facts.is-one-line {
    flex-wrap: nowrap;
}

.h-cta2__facts li {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--facts-icon-gap) * var(--fit));
}

/* Wrapped (no script, or a language too long for a narrow phone), a long check may break */
.h-cta2__facts.is-one-line li {
    white-space: nowrap;
}

.h-cta2__facts i {
    color: var(--h-accent-on-dark);
    font-size: calc(var(--facts-icon) * var(--fit));
}

/* The photo fills its half; the cashier and the till stay in view */
.h-cta2__photo {
    position: relative;
    min-height: 540px;
}

.h-cta2__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 4%;
}

/* Tablet and down: the words, then the photo */
@media (max-width: 1023.98px) {
    .h-cta2__card {
        grid-template-columns: minmax(0, 1fr);
    }

    .h-cta2__body {
        padding: 64px 40px 48px;
    }

    .h-cta2__photo {
        min-height: 0;
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 639px) {
    .h-cta2 {
        padding: 64px 8px;
    }

    .h-cta2__card {
        border-radius: 20px;
    }

    .h-cta2__body {
        padding: 44px 20px 36px;
    }

    /* A phone's row: closer ticks and gaps, so the words keep more of their size */
    .h-cta2__facts {
        --facts-gap: 14px;
        --facts-icon: 14px;
        --facts-icon-gap: 5px;
    }

    .h-cta2__sub {
        font-size: 16px;
    }

    .h-cta2__actions {
        width: 100%;
    }

    .h-cta2__btn {
        flex: 1 1 100%;
    }
}