/* ============================================================================
 * Component: home-promo (0.324.1) — one action as a white card on top of the green hero, under the transparent header (the
 * header's white logo needs the green behind it). The whole card is the link (stretched ::after). Phones: the button
 * shrinks to its arrow to keep the card low.
 * ========================================================================= */
.rc-hp {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: calc(100% - 32px);
    max-width: 1180px;
    margin: 0 auto 24px;
    padding: 10px 12px;
    border-radius: 16px;
    background: var(--robbo-white);
    box-shadow: 0 10px 30px color-mix(in srgb, var(--robbo-black) 16%, transparent);
    font-family: 'ProximaNova', 'Proxima Nova', 'Noto Sans', sans-serif;
    color: var(--robbo-coal);
}
.rc-hp[hidden] { display: none !important; }
.rc-hp *, .rc-hp *::before, .rc-hp *::after { box-sizing: border-box; }
.rc-hp-inner { display: flex; align-items: center; gap: 12px; }
.rc-hp-img { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--robbo-grey-light); }
.rc-hp-txt { display: flex; flex-direction: column; flex: 1 1 auto; gap: 1px; min-width: 0; }
.rc-hp-title { font-size: var(--robbo-fs-md); font-weight: 800; line-height: 1.25; color: var(--robbo-black); }
.rc-hp-text { font-size: var(--robbo-fs-md); line-height: 1.3; color: var(--robbo-coal); }
.rc-hp-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--robbo-green);
    color: var(--robbo-white);
    font-size: var(--robbo-fs-md);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: background 0.2s ease;
}
.rc-hp-cta::after { content: ''; position: absolute; inset: 0; }
.rc-hp-cta:hover { background: var(--robbo-green-dark); color: var(--robbo-white); }
.rc-hp-cta:focus-visible { outline: 2px solid var(--robbo-coal); outline-offset: 2px; }
.rc-hp-cta-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* inside the hero, above its two columns: the band takes a row of its own, the hero keeps its full height */
.rc-home-hero--promo { flex-wrap: wrap; align-content: flex-start; }
@media (max-width: 719px) {
    .rc-home-hero.rc-home-hero--promo { padding-top: 68px; }
    .rc-hp { margin-bottom: 16px; }
}

@media (min-width: 720px) {
    .rc-hp-cta { width: auto; height: auto; min-height: 42px; padding: 10px 20px; }
    .rc-hp-cta-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
    .rc-hp-img { flex-basis: 52px; width: 52px; height: 52px; }
    .rc-hp-title { font-size: var(--robbo-fs-base); }
}
@media (min-width: 720px) { .rc-hp { padding: 10px 14px; } }
@media (prefers-reduced-motion: reduce) { .rc-hp-cta { transition: none; } }