@font-face {
    font-family: "PetConnect Display";
    src: url("display-regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "PetConnect Display";
    src: url("display-medium.woff2") format("woff2");
    font-weight: 500 600;
    font-display: swap;
}
@font-face {
    font-family: "PetConnect Display";
    src: url("display-bold.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}
* { box-sizing: border-box; }
body, h1, h2, p { margin: 0; }
:root { color-scheme: light; --accent: #ff2d55; }
body {
    background: #fff;
    color: #000;
    font-family: "PetConnect Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}
button { font: inherit; cursor: pointer; }
button:focus-visible { outline: 3px solid #000; outline-offset: 5px; }
.page { max-width: 1280px; margin: 0 auto; padding: 176px 0; }
.content, .footer { width: min(827px, calc(100% - 32px)); margin: 0 auto; }
.content { display: flex; flex-direction: column; gap: 200px; align-items: center; }
.hero, .hero-text { display: flex; flex-direction: column; align-items: center; width: 100%; }
.hero { gap: 32px; }
.hero-text { max-width: 725px; gap: 12px; }
.brand { font-size: 18px; line-height: 22px; font-weight: 600; text-align: center; }
h1, h2, .footer-links {
    font-family: "PetConnect Display", ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
}
h1, h2 { font-size: 48px; line-height: 57px; text-align: center; }
.buttons { display: flex; align-items: center; gap: 8px; }
.download-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border: 0;
    border-radius: 14px;
    background: var(--accent);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0.2px;
    white-space: nowrap;
}
.download-button.android { width: 223px; }
.download-button.ios { width: 192px; }
.download-button img { flex: 0 0 18px; object-fit: contain; }
.download-button:hover { filter: brightness(0.94); }
.mockup, .mockup img { display: block; width: 100%; }
.mockup img { height: auto; }
.feature { display: flex; flex-direction: column; gap: 48px; width: 100%; }
.footer {
    display: grid;
    grid-template-columns: 426px 255px;
    grid-template-rows: 52px 156px;
    column-gap: 146px;
    row-gap: 32px;
    align-content: center;
    margin-top: 281px;
    min-height: 255px;
    scroll-margin-top: 24px;
}
.footer .buttons { grid-column: 1; grid-row: 1; }
.footer-links { grid-column: 1; grid-row: 2; }
.footer-links, .store-links { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.footer-links button {
    padding: 0;
    border: 0;
    background: none;
    color: #5c5c5c;
    font: inherit;
    font-size: 18px;
    line-height: 21px;
    letter-spacing: inherit;
    text-align: left;
    white-space: nowrap;
}
.footer-links button:hover { color: #000; text-decoration: underline; }
.qr { grid-column: 2; grid-row: 1 / 3; width: 255px; height: 255px; align-self: center; }
dialog {
    width: min(420px, calc(100% - 32px));
    padding: 28px;
    border: 0;
    border-radius: 24px;
    color: #000;
    background: #fff;
}
dialog::backdrop { background: rgb(0 0 0 / 35%); }
dialog h2 { font-size: 24px; line-height: 30px; text-align: left; }
dialog p { margin: 16px 0 24px; line-height: 1.5; }
@media (min-width: 900px) {
    .content, .footer { position: relative; left: -12.5px; }
}
@media (min-width: 641px) and (max-width: 899px) {
    h1, h2 { font-size: 40px; line-height: 48px; }
    .hero-text { max-width: 650px; }
    .footer { grid-template-columns: minmax(0, 1fr) 180px; column-gap: 16px; }
    .qr { width: 180px; height: 180px; }
    .footer .download-button { width: auto; padding-inline: 12px; font-size: 14px; }
}
@media (max-width: 640px) {
    .page { padding: 192px 0 98px; }
    .content { gap: 120px; max-width: 440px; }
    .hero-text { max-width: 344px; }
    .brand { font-size: 15px; line-height: 18px; }
    h1, h2 { font-size: 28px; line-height: 33px; }
    .buttons { flex-direction: column; }
    .download-button.android, .download-button.ios { width: 223px; }
    .footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        min-height: 0;
        margin-top: 120px;
    }
    .qr { order: -1; }
    .footer-links { width: 268px; }
    .store-links { flex-direction: row; }
}
@media (max-width: 374px) {
    h1, h2 { font-size: 24px; line-height: 29px; }
}