/* Desktop and tablet hero proportions aligned to the approved homepage mockup. */

@media (min-width: 1181px) {
    .kc-ref-hero {
        padding: 30px 0 12px;
    }

    .kc-ref-hero__grid {
        min-height: 600px;
        grid-template-columns: minmax(590px, .98fr) minmax(700px, 1.18fr);
        gap: 22px;
    }

    .kc-ref-hero__copy {
        padding: 16px 0 26px;
    }

    .kc-ref-hero__copy h1 {
        max-width: 700px;
        font-size: clamp(54px, 3.35vw, 66px);
        line-height: 1.015;
        letter-spacing: -.048em;
        text-wrap: balance;
    }

    .kc-ref-hero__copy > p {
        margin: 22px 0 24px;
        font-size: 19px;
        line-height: 1.48;
    }

    .kc-ref-pet-switch {
        grid-template-columns: repeat(2, minmax(0, 264px));
        gap: 16px;
    }

    .kc-ref-pet-card {
        min-height: 210px;
    }

    .kc-ref-pet-card strong {
        font-size: 23px;
    }

    .kc-ref-hero__visual {
        min-height: 575px;
    }

    .kc-ref-hero__visual::after {
        right: -1%;
        bottom: -1%;
        width: 100%;
        height: 100%;
        background-position: center bottom;
    }

    .kc-ref-doodle--heart {
        top: 30%;
        left: 2%;
        font-size: 62px;
    }

    .kc-ref-doodle--paw {
        top: 16%;
        right: 1%;
    }

    .kc-ref-tools {
        padding-top: 34px;
    }
}

@media (min-width: 861px) and (max-width: 1180px) {
    .kc-ref-hero {
        padding: 26px 0 14px;
    }

    .kc-ref-hero__grid {
        min-height: 540px;
        grid-template-columns: minmax(455px, .96fr) minmax(500px, 1.04fr);
        gap: 20px;
    }

    .kc-ref-hero__copy h1 {
        max-width: 570px;
        font-size: clamp(48px, 5vw, 58px);
        line-height: 1.02;
        letter-spacing: -.045em;
    }

    .kc-ref-hero__copy > p {
        margin: 20px 0 22px;
        font-size: 17px;
    }

    .kc-ref-pet-switch {
        grid-template-columns: repeat(2, minmax(0, 218px));
        gap: 14px;
    }

    .kc-ref-pet-card {
        min-height: 188px;
    }

    .kc-ref-pet-card strong {
        font-size: 21px;
    }

    .kc-ref-hero__visual {
        min-height: 520px;
    }

    .kc-ref-hero__visual::after {
        width: 98%;
        height: 98%;
        right: -1%;
        bottom: 0;
        background-position: center bottom;
    }
}

@media (max-width: 860px) {
    .kc-ref-hero__copy h1 {
        max-width: 680px;
        text-wrap: balance;
    }

    .kc-ref-hero__visual::after {
        background-position: center bottom;
    }
}