.hero {
    position: relative
}

.hero-copy {
    position: relative;
    z-index: 1
}

.hero-promise {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -8px 0 25px
}

.hero-promise span {
    border: 1px solid #c9d4ca;
    background: #f0f5ef;
    color: var(--deep-sage);
    padding: 6px 9px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em
}

.hero-actions .button-primary {
    box-shadow: 0 8px 0 #c95737
}

.hero-actions .button-primary:active {
    transform: translateY(3px);
    box-shadow: 0 4px 0 #c95737
}

.hero-visual {
    filter: drop-shadow(0 18px 20px rgba(29, 41, 38, .08))
}

.hero-stamp {
    position: absolute;
    right: -24px;
    top: 24px;
    width: 92px;
    height: 92px;
    border: 2px solid var(--orange);
    border-radius: 50%;
    background: var(--paper);
    display: grid;
    place-content: center;
    text-align: center;
    color: var(--deep-sage);
    transform: rotate(9deg);
    box-shadow: 0 5px 0 var(--orange)
}

.hero-stamp strong {
    font: 700 31px var(--serif);
    line-height: .9
}

.hero-stamp span {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.2;
    margin-top: 5px
}

.micro-proof {
    font-weight: 600
}

.micro-proof::after {
    content: ' · Instant digital download';
    font-weight: 400;
    color: var(--muted)
}

@media(max-width:600px) {
    .hero-promise {
        gap: 6px;
        margin: -5px 0 22px
    }

    .hero-promise span {
        font-size: 8px;
        padding: 6px 7px
    }

    .hero-actions .button-primary {
        box-shadow: 0 6px 0 #c95737
    }

    .hero-stamp {
        right: -10px;
        top: 11px;
        width: 76px;
        height: 76px
    }

    .hero-stamp strong {
        font-size: 25px
    }

    .hero-stamp span {
        font-size: 7px
    }

    .floating-note {
        z-index: 1
    }

    .micro-proof {
        font-size: 10px
    }

    .micro-proof::after {
        display: block;
        margin-top: 4px
    }
}

@media(max-width:600px) {
    .hero {
        gap: 20px;
        padding-top: 28px;
        padding-bottom: 48px
    }

    .hero h1 {
        font-size: clamp(36px, 9.5vw, 42px);
        line-height: 1.04;
        margin-bottom: 12px
    }

    .hero-subtitle {
        font-size: 15px;
        line-height: 1.42;
        margin-bottom: 18px
    }

    .hero-promise {
        margin: -2px 0 16px
    }

    .hero-actions .button-primary {
        min-height: 54px;
        padding: 0 18px
    }

    .hero-visual {
        width: 100%;
        max-width: 390px;
        justify-self: center
    }

    .hero-image-frame {
        padding: 0;
        background: transparent;
        box-shadow: none;
        border-radius: 14px;
        overflow: hidden;
        transform: none
    }

    .hero-image-frame img {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: cover
    }

    .floating-note {
        left: 10px;
        bottom: 14px
    }

    .hero-stamp {
        right: 8px;
        top: 10px
    }
}