/* Review candidate only. Load AFTER preview-v3.css from theme 0.4.7.
   No global tokens, layout, image geometry or non-hero sections are changed.
   Final 0.4.7 rules hide shade/copy::before and remove text-shadow <=899px.
   Therefore only the visible desktop layers need their RGB neutralized.
   Existing gradient positions, alpha values and shadow geometry are retained. */

.hero {
    --hero-graphite: #302e29;
    --hero-paper: #fffdf7;
    background-color: var(--hero-graphite);
}

@media (min-width: 900px) {
    .hero__shade {
        background:
            radial-gradient(ellipse at 21% 63%, rgba(24, 23, 21, .29) 0%, rgba(24, 23, 21, .14) 38%, rgba(24, 23, 21, 0) 70%),
            linear-gradient(90deg, rgba(24, 23, 21, .33) 0%, rgba(24, 23, 21, .16) 38%, rgba(24, 23, 21, .01) 74%, rgba(24, 23, 21, .03) 100%),
            linear-gradient(180deg, rgba(24, 23, 21, .01) 0%, rgba(24, 23, 21, 0) 42%, rgba(24, 23, 21, .18) 100%);
    }

    .hero__copy {
        text-shadow: 0 2px 18px rgba(24, 23, 21, .58);
    }

    .hero__copy::before {
        background: radial-gradient(ellipse at 18% 54%, rgba(24, 23, 21, .22) 0%, rgba(24, 23, 21, .10) 52%, rgba(24, 23, 21, 0) 82%);
    }

    .hero__facts {
        background: rgba(24, 23, 21, .14);
    }
}

@media (max-width: 899px) {
    .hero__content {
        background: var(--hero-graphite);
    }

    /* Both final mobile and tablet fact backgrounds have alpha .12. */
    .hero__facts {
        background: rgba(24, 23, 21, .12);
    }
}

.hero__actions .button--primary {
    color: var(--hero-graphite);
    background: var(--hero-paper);
    border-color: var(--hero-paper);
    text-shadow: none;
}

.hero__actions .button--primary:hover {
    color: var(--hero-graphite);
    background: #e9e2d5;
    border-color: #e9e2d5;
}

.hero__actions .button--ghost {
    color: var(--hero-paper);
    background: transparent;
    border-color: rgba(255, 253, 247, .60);
}

.hero__actions .button--ghost:hover {
    color: var(--hero-paper);
    background: rgba(48, 46, 41, .76);
    border-color: var(--hero-paper);
}

/* Two-tone focus stays distinguishable over both facade and solid graphite.
   It changes only the focus appearance, never the button's box dimensions. */
.hero__actions .button:focus-visible {
    outline: 2px solid var(--hero-paper);
    outline-offset: 4px;
    box-shadow: 0 0 0 4px var(--hero-graphite);
}