/* Shared by Razor Pages and Blazor. Keep presentation here, never in page overrides. */
.rho-marketing-ribbon {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: 100%;
    margin: 0;
    padding: 120px 0;
    background: linear-gradient(110deg, #5c1f08, #7a2b07 58%, #963706);
    color: #fff8f2;
    text-align: left;
    font-family: 'Inter', sans-serif;
}

.rho-marketing-ribbon,
.rho-marketing-ribbon * { box-sizing: border-box; }

.rho-marketing-ribbon__content {
    position: relative;
    z-index: 1;
    width: min(1240px, calc(100% - 64px));
    margin: 0 auto;
}

.rho-marketing-ribbon__mark {
    position: absolute;
    z-index: 0;
    right: 5%;
    top: -180px;
    color: rgba(255, 255, 255, .055);
    font: 500 560px/normal Georgia, serif;
    pointer-events: none;
    user-select: none;
}

.rho-marketing-ribbon__eyebrow {
    display: block;
    color: #ffc38f;
    font: 500 11px/1.5 'IBM Plex Mono', monospace;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.rho-marketing-ribbon h2.rho-marketing-ribbon__title {
    max-width: 1120px;
    margin: 25px 0 40px;
    color: #fff8f2;
    font: 700 clamp(48px, 6vw, 82px)/1 'Inter', sans-serif;
    letter-spacing: -.035em;
    text-wrap: balance;
}

.rho-marketing-ribbon p.rho-marketing-ribbon__description {
    max-width: 760px;
    margin: -12px 0 32px;
    color: #ffe1c8;
    font: 400 18px/1.7 'Inter', sans-serif;
}

.rho-marketing-ribbon__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
}

.rho-marketing-ribbon a.rho-marketing-ribbon__button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    width: fit-content;
    max-width: 100%;
    min-height: 50px;
    margin: 0;
    border: 1px solid #fff1e5;
    border-radius: 0;
    padding: 15px 20px;
    background: #fff1e5;
    color: #281006;
    box-shadow: 0 12px 32px rgba(35, 10, 2, .24);
    font: 600 12px/1.5 'IBM Plex Mono', monospace;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .2s, color .2s;
}

.rho-marketing-ribbon a.rho-marketing-ribbon__button:hover {
    border-color: #fff;
    background: #fff;
    color: #281006;
}

.rho-marketing-ribbon a.rho-marketing-ribbon__button--secondary {
    background: transparent;
    color: #fff8f2;
    box-shadow: none;
}

.rho-marketing-ribbon__button:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }

/* Public hosts keep their content container while the final ribbon spans the page. */
.rho-marketing-page-host:has(> .rho-marketing-ribbon) {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.rho-marketing-page-host > .rho-marketing-page-content {
    width: min(1140px, calc(100% - 40px));
    margin-inline: auto;
}

@media (max-width: 680px) {
    .rho-marketing-ribbon { padding: 72px 0; }
    .rho-marketing-ribbon__content { width: calc(100% - 32px); }
    .rho-marketing-ribbon h2.rho-marketing-ribbon__title { font-size: clamp(36px, 8vw, 48px); margin: 22px 0 32px; }
    .rho-marketing-ribbon__mark { top: -70px; right: -55px; font-size: 360px; }
    .rho-marketing-ribbon p.rho-marketing-ribbon__description { font-size: 16px; }
    .rho-marketing-ribbon__actions { gap: 12px; }
    .rho-marketing-ribbon a.rho-marketing-ribbon__button { gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .rho-marketing-ribbon a.rho-marketing-ribbon__button { transition: none; }
}