@font-face {
  font-family: "Manrope";
  src: url("/assets/manrope-extrabold.ttf") format("truetype");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/inter-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/inter-semibold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  --brand-blue: #13254a;
  --ink: #1d2a42;
  --ink-soft: #3a475d;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #f4f7fb;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }
body { margin: 0; }

/* Texts cannot be selected or copied; only the tag number field stays editable. */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
img, video { -webkit-user-drag: none; pointer-events: none; }

/* Every page is one full-height screen; decorations never add a stray scrollbar. */
.screen {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  overflow-x: clip;
  color: var(--ink);
  background: linear-gradient(180deg, #f7f9fc 0%, #eef3f9 100%);
  isolation: isolate;
}

.brand-logo { display: block; width: 118px; height: auto; }
.screen { transition: opacity 260ms cubic-bezier(.4, 0, .2, 1); }
.screen.is-leaving { opacity: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Search and payment screens ---------- */
.search-screen { background: #f1f5fa; }
.search-header { position: relative; flex-shrink: 0; padding: max(22px, env(safe-area-inset-top)) 0 40px; background: #fbfcfe; text-align: center; }
.search-header .brand-logo { width: 140px; margin: 0 auto; }
.wave { position: absolute; left: 0; width: 100%; height: 34px; }
.search-header .wave { bottom: -1px; fill: #f1f5fa; }

.search-main { display: flex; flex-direction: column; flex: 1; width: 100%; max-width: 480px; margin-inline: auto; padding: 22px 22px max(34px, env(safe-area-inset-bottom)); text-align: center; }
.search-main h1 { margin: 0 auto; max-width: 300px; color: var(--brand-blue); font-family: "Manrope", "Inter", sans-serif; font-size: 35px; font-weight: 800; line-height: 1.1; letter-spacing: -1px; }
.search-lead { margin: 12px auto 26px; max-width: 320px; color: var(--ink); font-size: 17px; line-height: 1.45; letter-spacing: -.2px; }
.search-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.tag-field { display: flex; align-items: center; gap: 14px; height: 64px; padding: 0 20px; border: 1px solid #dde4ee; border-radius: 14px; background: #fff; box-shadow: 0 2px 8px #13254a0a; cursor: text; transition: border-color 160ms ease, box-shadow 160ms ease; }
.tag-field:focus-within { border-color: #7f9cc6; box-shadow: 0 0 0 3px #13254a1a; }
.tag-hash { color: var(--brand-blue); font-family: "Manrope", "Inter", sans-serif; font-size: 30px; font-weight: 800; line-height: 1; }
.tag-field input { flex: 1; width: 100%; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--brand-blue); font: 400 26px "Inter", sans-serif; letter-spacing: .5px; }
.tag-field input::placeholder { color: #3e4d68; opacity: 1; }
.tag-field:has(input[aria-invalid="true"]) { border-color: #d0534b; }
.search-error { margin: -4px 0 0; color: #b93a33; font-size: 13px; line-height: 1.4; }
.search-button { display: flex; align-items: center; justify-content: center; gap: 14px; height: 60px; border: 0; border-radius: 12px; background: var(--brand-blue); color: #fff; font: 600 18px "Inter", sans-serif; text-decoration: none; cursor: pointer; box-shadow: 0 4px 12px #13254a26; transition: transform 160ms ease, filter 160ms ease; -webkit-tap-highlight-color: transparent; }
.search-button:hover { filter: brightness(1.12); }
.search-button:active { transform: scale(.98); filter: brightness(1.15); }
.search-button:disabled { cursor: progress; filter: brightness(1.25); }
.search-button:focus-visible { outline: 3px solid #9dbbe6; outline-offset: 3px; }
.search-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

@media (max-width: 359px) {
  .search-main h1 { font-size: 30px; }
  .search-lead { font-size: 15px; }
}

/* ---------- Profile (/mascota/:id): graphite app look (menu, sidebar and tasks widget references) with playful dog and cat motion ---------- */
html.graphite-page, html.graphite-page body { background: #0a0a0a; }

/* Shared by the profile and the search: graphite tokens, lit background and paw prints. */
.graphite-screen {
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #0a0a0a;
  --card: #161616;
  --border: rgb(255 255 255 / .08);
  --text: #ededed;
  --text-2: #8a8a8a;
  --radius: 24px;
  min-height: 100svh;
  min-height: 100dvh;
  color: var(--text);
  font-family: var(--font);
  /* Soft light from the top and a faint glow in the middle, like the lit tasks widget. */
  background:
    radial-gradient(90% 38% at 50% 0%, rgb(255 255 255 / .11) 0%, rgb(255 255 255 / .03) 55%, rgb(255 255 255 / 0) 100%),
    radial-gradient(70% 30% at 50% 58%, rgb(255 255 255 / .035) 0%, rgb(255 255 255 / 0) 100%),
    var(--bg);
  color-scheme: dark;
  overflow: clip;
}
/* Scattered paw prints taking over where the dots fade, very faint. */
.graphite-screen::after { content: ''; position: absolute; inset: 0; z-index: -1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='white' fill-opacity='.05'%3E%3Cg transform='translate(20 22) rotate(-24 12 12)'%3E%3Cellipse cx='5' cy='10' rx='2.2' ry='2.8'/%3E%3Cellipse cx='9.3' cy='5.4' rx='2.3' ry='3'/%3E%3Cellipse cx='14.7' cy='5.4' rx='2.3' ry='3'/%3E%3Cellipse cx='19' cy='10' rx='2.2' ry='2.8'/%3E%3Cpath d='M12 11c-3 0-6.5 4.2-6.5 7 0 2 1.6 3 3.4 3 1.2 0 2-.6 3.1-.6s1.9.6 3.1.6c1.8 0 3.4-1 3.4-3 0-2.8-3.5-7-6.5-7Z'/%3E%3C/g%3E%3Cg transform='translate(96 90) scale(.8) rotate(28 12 12)'%3E%3Cellipse cx='5' cy='10' rx='2.2' ry='2.8'/%3E%3Cellipse cx='9.3' cy='5.4' rx='2.3' ry='3'/%3E%3Cellipse cx='14.7' cy='5.4' rx='2.3' ry='3'/%3E%3Cellipse cx='19' cy='10' rx='2.2' ry='2.8'/%3E%3Cpath d='M12 11c-3 0-6.5 4.2-6.5 7 0 2 1.6 3 3.4 3 1.2 0 2-.6 3.1-.6s1.9.6 3.1.6c1.8 0 3.4-1 3.4-3 0-2.8-3.5-7-6.5-7Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 0 / 150px 150px; -webkit-mask-image: linear-gradient(180deg, transparent 35%, #000 85%); mask-image: linear-gradient(180deg, transparent 35%, #000 85%); pointer-events: none; }
/* Icon symbols live here; the sprite never takes space. */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* The column fills the screen; the photo takes whatever height is left, so nothing ends up far apart. */
.pet-profile { position: relative; display: flex; flex: 1 0 auto; flex-direction: column; justify-content: center; container-type: inline-size; width: 100%; margin-inline: auto; padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(40px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); transition: opacity 520ms cubic-bezier(.4, 0, .2, 1); }
/* Content waits for its data so another pet's defaults never flash. */
.pet-profile.is-loading { opacity: 0; }

/* Entrance: each block rises in turn once the pet data is in. */
@keyframes rise-in { from { opacity: 0; translate: 0 16px; } }
.pet-profile:not(.is-loading) :is(.pet-top, .pet-greeting, .pet-stage, .contact-actions, .ad-carousel) { animation: rise-in 700ms cubic-bezier(.2, .7, .2, 1) backwards; }
.pet-profile:not(.is-loading) .pet-greeting { animation-delay: 90ms; }
.pet-profile:not(.is-loading) .pet-stage { animation-delay: 180ms; }
.pet-profile:not(.is-loading) .contact-actions { animation-delay: 270ms; }
.pet-profile:not(.is-loading) .ad-carousel { animation-delay: 360ms; }

/* Paw prints walking across the corner beside the name, one step at a time, then fading away. */
.paw-trail { position: absolute; top: -8px; bottom: -4px; right: 0; z-index: -1; width: 46%; pointer-events: none; }
.paw-trail svg { position: absolute; width: 18px; height: 18px; fill: rgb(255 255 255 / .2); opacity: 0; transform: translate(-50%, -50%) rotate(-45deg); animation: paw-step 6s ease-out infinite backwards; }
.paw-trail svg:nth-child(1) { left: 96%; top: 84%; animation-delay: 0.90s; }
.paw-trail svg:nth-child(2) { left: 71%; top: 76%; animation-delay: 1.35s; }
.paw-trail svg:nth-child(3) { left: 63%; top: 51%; animation-delay: 1.80s; }
.paw-trail svg:nth-child(4) { left: 37%; top: 43%; animation-delay: 2.25s; }
.paw-trail svg:nth-child(5) { left: 29%; top: 18%; animation-delay: 2.70s; }
.paw-trail svg:nth-child(6) { left: 4%; top: 10%; animation-delay: 3.15s; }
/* Each print fades in and out slowly, without popping. */
@keyframes paw-step { 0% { opacity: 0; } 18% { opacity: .8; } 45% { opacity: .8; } 75%, 100% { opacity: 0; } }

/* Header: just the back button on the left, a graphite pill with the arrow in its own circle, like the "Create" button. */
.pet-top { position: relative; display: flex; align-items: center; justify-content: flex-start; min-height: 44px; }
.back-pill { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 4px 16px 4px 4px; border: 1px solid var(--border); border-radius: 999px; background: #1a1a1a; color: var(--text); font: 600 14px var(--font); text-decoration: none; transition: background-color 180ms ease, transform 180ms ease; -webkit-tap-highlight-color: transparent; }
.back-pill:hover { background: #232323; }
.back-pill:active { transform: scale(.96); }
.back-pill:focus-visible { outline: 2px solid rgb(255 255 255 / .6); outline-offset: 3px; }
.back-pill-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #2c2c2c; }
.back-pill-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: translate 200ms ease; }
.back-pill:hover .back-pill-icon svg { translate: -2px 0; }

/* Title: grey lead and the name in big type. */
.pet-greeting { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 22px 0 0; font-family: var(--font); font-weight: 400; }
/* The lead is handwritten, like the Piero logo. */
.greeting-lead { color: rgb(255 255 255 / .74); font-family: "Caveat", var(--font); font-size: 28px; font-weight: 600; line-height: 1; letter-spacing: .01em; }
.pet-name-line { display: flex; align-items: center; min-width: 0; max-width: 100%; }
.pet-name { min-width: 0; color: #fff; font-size: clamp(34px, 10.5vw, 40px); font-weight: 600; line-height: 1.1; letter-spacing: -.025em; overflow-wrap: anywhere; }

/* Photo card: rounded, hairline edge and a soft shade at the bottom for the hint. */
/* Never shorter than 250px nor taller than one and a half times its width. */
.pet-stage { position: relative; display: flex; flex: 1 1 auto; flex-direction: column; min-height: 250px; max-height: 150cqi; margin-top: 20px; }
.stage-viewport { position: relative; flex: 1 1 auto; min-height: 250px; overflow: visible; overscroll-behavior-x: none; touch-action: pan-y; cursor: grab; }
.stage-viewport.is-dragging { cursor: grabbing; }
.stage-track { position: absolute; inset: 0; display: flex; gap: 24px; will-change: transform; }
.stage-slide { position: relative; flex: 0 0 100%; min-width: 0; overflow: hidden; border-radius: var(--radius); clip-path: inset(0 round var(--radius)); }
.pet-hero { background: var(--card); }
.pet-hero::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1), inset 0 -90px 70px -50px rgb(0 0 0 / .6); pointer-events: none; }
.pet-photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }

/* Graphite glass pill over the photo, same look as the WhatsApp button; the arrows nudge to invite the swipe. */
.swipe-hint { position: absolute; left: 50%; bottom: 14px; z-index: 2; display: flex; align-items: center; gap: 10px; margin: 0; padding: 5px 18px 5px 5px; border-radius: 999px; background: rgb(28 28 28 / .9); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09), 0 8px 20px -8px rgb(0 0 0 / .6); color: #fff; font-family: var(--font); font-size: 14px; font-weight: 600; white-space: nowrap; transform: translateX(-50%); cursor: pointer; transition: opacity 500ms cubic-bezier(.4, 0, .2, 1); }
.hint-icon { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: #0a0a0a; }
.hint-icon svg { width: 16px; height: 16px; animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { translate: 0 0; } 50% { translate: -3px 0; } }
.pet-stage.is-open .swipe-hint { opacity: 0; }
/* Tag number on the top left of the photo: just "#4746" in a small graphite pill. */
.tag-chip { position: absolute; top: 14px; left: 14px; z-index: 2; display: flex; align-items: center; height: 32px; margin: 0; padding: 0 13px; border-radius: 999px; background: rgb(20 20 20 / .78); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); color: #fff; font-family: var(--font); font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: .03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stage-dots { display: none; }

/* Pet details card: the tasks widget, with a glowing ring and one pill per detail. */
.stage-info { display: flex; flex-direction: column; padding: 16px 14px 14px; background: radial-gradient(70% 55% at 50% 100%, rgb(255 255 255 / .12) 0%, rgb(255 255 255 / 0) 100%), linear-gradient(180deg, #262626 0%, #171717 100%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); }
.info-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 2px 12px 6px; }
.card-title { margin: 0; color: #fff; font-family: var(--font); font-size: 20px; font-weight: 400; letter-spacing: -.01em; line-height: 1.25; }
.info-ring { position: relative; display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 46px; }
.info-ring .ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; rotate: -90deg; }
.ring-track { fill: #121212; stroke: rgb(255 255 255 / .1); stroke-width: 2; }
.ring-fill { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 3px rgb(255 255 255 / .8)); transition: stroke-dashoffset 1200ms cubic-bezier(.3, .7, .2, 1) 150ms; }
.pet-stage.is-open .ring-fill { stroke-dashoffset: 0; }
.ring-icon { position: relative; width: 20px; height: 20px; fill: #fff; }
.pet-stage.is-open .ring-icon { animation: paw-pop 600ms cubic-bezier(.3, 1.6, .5, 1) 1100ms backwards; }
@keyframes paw-pop { 0% { scale: 1; } 50% { scale: 1.3; } 100% { scale: 1; } }
/* Rows share the card height evenly, so the list always fits. */
/* On tall cards the pills keep their size and sit in the middle. */
.pet-specs { display: grid; flex: 1 1 auto; grid-auto-rows: minmax(0, 64px); align-content: center; gap: 10px; min-height: 0; margin: 0; padding: 0; list-style: none; }
.pet-specs li { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 0; padding: 0 20px 0 12px; border-radius: 999px; background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .04); }
/* The icon circle shrinks with the pill on short cards. */
.spec-icon { box-sizing: content-box; display: grid; place-items: center; flex-shrink: 0; width: 18px; height: 18px; padding: 8px; border-radius: 50%; background: #fff; color: #0a0a0a; }
.spec-icon svg { width: 100%; height: 100%; fill: currentColor; }
.spec-icon svg[stroke] { fill: none; }
.spec-text { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.spec-label { color: #cfcfcf; font-size: 15px; font-weight: 400; line-height: 1.25; }
.spec-value { color: #fff; font-family: var(--font); font-size: 15px; font-weight: 600; line-height: 1.25; text-align: right; overflow-wrap: anywhere; }
/* Opening the card lays the pills in one by one. */
@keyframes pill-in { from { opacity: 0; translate: 18px 0; } }
.pet-stage.is-open .pet-specs li { animation: pill-in 560ms cubic-bezier(.2, .7, .2, 1) backwards; }
.pet-stage.is-open .pet-specs li:nth-child(1) { animation-delay: 140ms; }
.pet-stage.is-open .pet-specs li:nth-child(2) { animation-delay: 220ms; }
.pet-stage.is-open .pet-specs li:nth-child(3) { animation-delay: 300ms; }
.pet-stage.is-open .pet-specs li:nth-child(4) { animation-delay: 380ms; }

/* Call / WhatsApp: two grey glass pills with the icon in a white circle. */
/* On phones the title wrapper disappears from the layout and the buttons sit under the photo, before the advertising. */
.pet-intro { display: contents; }
.pet-stage { order: 1; }
.contact-actions { order: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.contact-actions a { display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 16px 0 8px; border-radius: 999px; font-family: var(--font); font-size: 16px; font-weight: 600; text-decoration: none; transition: filter 180ms ease, transform 180ms ease, background-color 180ms ease; -webkit-tap-highlight-color: transparent; }
.contact-actions .icon { box-sizing: content-box; width: 20px; height: 20px; flex-shrink: 0; padding: 12px; border-radius: 50%; }
.contact-actions a { background: rgb(255 255 255 / .09); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07); color: #fff; }
.contact-actions .icon { background: #fff; fill: #0a0a0a; }
/* The phone gives a little shake every few seconds, as if it were ringing. */
.contact-call .icon { animation: phone-ring 4s ease-in-out 2s infinite; }
.contact-actions a:hover { background: rgb(255 255 255 / .14); }
.contact-actions a:active { transform: scale(.97); }
.contact-actions a:focus-visible { outline: 2px solid rgb(255 255 255 / .6); outline-offset: 3px; }
@keyframes phone-ring { 0%, 84%, 100% { rotate: 0deg; } 86% { rotate: -14deg; } 89% { rotate: 12deg; } 92% { rotate: -9deg; } 95% { rotate: 5deg; } }

/* Advertising: same rounding and hairline edge as the photo. */
.ad-carousel { order: 3; position: relative; margin-top: 16px; overflow: hidden; aspect-ratio: 2 / 1; border-radius: var(--radius); background: var(--card); box-shadow: 0 0 0 1px var(--border); touch-action: pan-y; isolation: isolate; }
.ad-track { display: flex; height: 100%; transition: transform 700ms cubic-bezier(.2, .7, .2, 1); }
.ad-slide { display: block; flex: 0 0 100%; height: 100%; }
.ad-slide { position: relative; }
.ad-slide img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; }
/* Only shows where the banner does not reach: a blurred copy of the same image. */
.ad-slide .ad-backdrop { position: absolute; inset: 0; object-fit: cover; scale: 1.15; filter: blur(26px) saturate(1.15) brightness(.75); }
.ad-dots { position: absolute; left: 0; right: 0; bottom: 10px; z-index: 2; display: flex; justify-content: center; gap: 6px; }
.ad-dots button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 999px; background: rgb(255 255 255 / .4); cursor: pointer; transition: width 300ms ease, background-color 300ms ease; }
.ad-dots button[aria-current="true"] { width: 16px; background: #fff; }

/* When there is room beside the column the other card would show: clip it inside the rounded frame. */
@media (min-width: 428px) {
  .stage-viewport { overflow: hidden; border-radius: var(--radius); clip-path: inset(0 round var(--radius)); }
}

/* Short phones (iPhone SE, small Android) and phones on their side: tighter spacing so the profile fits on one screen. */
@media (max-width: 599px) and (max-height: 739px), (orientation: landscape) and (max-height: 500px) {
  .pet-profile { padding-top: max(14px, env(safe-area-inset-top)); padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .pet-top { min-height: 40px; }
  .back-pill { height: 40px; padding: 3px 14px 3px 3px; font-size: 13px; }
  .back-pill-icon { width: 32px; height: 32px; }
  .pet-greeting { gap: 6px; margin-top: 14px; }
  .greeting-lead { font-size: 24px; }
  .pet-name { font-size: 34px; line-height: 1.05; }
  .pet-stage, .stage-viewport { min-height: 170px; }
  .pet-stage { margin-top: 14px; }
  .swipe-hint { bottom: 10px; }
  .tag-chip { top: 10px; left: 10px; height: 30px; padding: 0 12px; font-size: 13.5px; }
  .contact-actions, .ad-carousel { margin-top: 12px; }
  .contact-actions a { height: 54px; gap: 8px; padding: 0 12px 0 6px; font-size: 15px; }
  .contact-actions .icon { width: 18px; height: 18px; padding: 10px; }
}

@media (max-width: 359px) {
  .pet-profile { padding-inline: 16px; }
  .greeting-lead { font-size: 23px; }
  .pet-name { font-size: 30px; }
  .contact-actions { gap: 8px; }
  .contact-actions a { gap: 8px; height: 54px; padding: 0 10px 0 6px; font-size: 14px; }
  .contact-actions .icon { width: 17px; height: 17px; padding: 10px; }
}

/* Wide phones and small foldables (480–599px upright): the buttons move next to the name, like on tablets, so the photo keeps its height. */
@media (min-width: 480px) and (max-width: 599px) and (orientation: portrait) {
  .pet-intro { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; margin-top: 22px; }
  .pet-intro .pet-greeting { flex: 1 1 auto; margin-top: 0; }
  .pet-intro .pet-name { overflow-wrap: break-word; }
  .contact-actions { order: 0; flex: 0 0 auto; grid-template-columns: auto auto; margin: 0 0 0 auto; }
}

@media (min-width: 480px) and (max-width: 599px) and (orientation: portrait) and (max-height: 739px) {
  .pet-intro { margin-top: 14px; }
}

/* Pet details card on small screens: smaller ring and pills. */
@media (max-width: 359px), (max-width: 599px) and (max-height: 739px), (orientation: landscape) and (max-height: 500px) {
  .stage-info { padding: 12px 10px 10px; }
  .info-head { margin-bottom: 8px; }
  .card-title { font-size: 17px; }
  .info-ring { width: 36px; height: 36px; }
  .ring-icon { width: 16px; height: 16px; }
  .pet-specs { gap: 6px; }
  .pet-specs li { gap: 9px; padding: 0 14px 0 9px; }
  .spec-icon { width: 15px; height: 15px; padding: 6px; }
  .spec-label, .spec-value { font-size: 13.5px; }
}

/* Tablets and desktop: everything scales up so it doesn't look like a phone lost in a big screen. */
@media (min-width: 600px) and (orientation: portrait), (min-width: 900px) and (min-height: 600px) and (orientation: landscape) {
  .pet-top { min-height: 52px; }
  .back-pill { height: 52px; gap: 10px; padding: 5px 22px 5px 5px; font-size: 16px; }
  .back-pill-icon { width: 40px; height: 40px; }
  .back-pill-icon svg { width: 20px; height: 20px; }
  .pet-greeting { gap: 12px; }
  .greeting-lead { font-size: 32px; }
  .pet-name { font-size: 54px; }
  .paw-trail svg { width: 24px; height: 24px; }
  .swipe-hint { bottom: 20px; gap: 12px; padding: 6px 22px 6px 6px; font-size: 16px; }
  .tag-chip { top: 20px; left: 20px; height: 38px; padding: 0 16px; font-size: 16px; }
  .hint-icon { width: 36px; height: 36px; }
  .hint-icon svg { width: 18px; height: 18px; }
  .stage-info { padding: 24px 20px 20px; }
  .info-head { margin: 0 4px 18px 8px; }
  .card-title { font-size: 26px; }
  .info-ring { width: 58px; height: 58px; }
  .ring-icon { width: 26px; height: 26px; }
  .pet-specs { grid-auto-rows: minmax(0, 76px); gap: 12px; }
  .pet-specs li { gap: 16px; padding: 0 28px 0 16px; }
  .spec-icon { width: 24px; height: 24px; padding: 11px; }
  .spec-label, .spec-value { font-size: 18px; }
  .contact-actions { gap: 14px; }
  .contact-actions a { height: 68px; gap: 14px; padding: 0 22px 0 10px; font-size: 18px; }
  .contact-actions .icon { width: 22px; height: 22px; padding: 14px; }
}

/* Tablets upright (iPad and similar): same order as the phone, using nearly the whole width.
   Sizes and gaps grow with the width but stop growing at iPad Pro size, so nothing gets oversized. */
@media (min-width: 600px) and (orientation: portrait) {
  .pet-profile { --radius: min(4cqi, 30px); padding: max(24px, 2.6vw, env(safe-area-inset-top)) max(28px, 4vw, env(safe-area-inset-right)) max(24px, 2.6vw, env(safe-area-inset-bottom)) max(28px, 4vw, env(safe-area-inset-left)); }
  .pet-top { min-height: min(7cqi, 52px); }
  .back-pill { height: min(7cqi, 52px); gap: min(1.6cqi, 12px); padding: min(.8cqi, 6px) min(3.4cqi, 25px) min(.8cqi, 6px) min(.8cqi, 6px); font-size: min(2.6cqi, 19px); }
  .back-pill-icon { width: min(6.2cqi, 46px); height: min(6.2cqi, 46px); }
  .back-pill-icon svg { width: min(3cqi, 22px); height: min(3cqi, 22px); }
  .pet-greeting { gap: min(1.2cqi, 9px); }
  .greeting-lead { font-size: min(4cqi, 31px); }
  .pet-name { font-size: min(7.8cqi, 58px); }
  .paw-trail svg { width: min(3.6cqi, 27px); height: min(3.6cqi, 27px); }
  /* The photo stays between a wide banner and a landscape frame. */
  .pet-stage { margin-top: min(2.8cqi, 21px); max-height: 100cqi; }
  .pet-stage, .stage-viewport { min-height: max(250px, 45cqi); }
  .swipe-hint { bottom: min(3cqi, 22px); gap: min(1.8cqi, 13px); padding: min(.9cqi, 7px) min(3.4cqi, 25px) min(.9cqi, 7px) min(.9cqi, 7px); font-size: min(2.5cqi, 18.5px); }
  .tag-chip { top: min(3cqi, 22px); left: min(3cqi, 22px); height: min(5.4cqi, 40px); padding: 0 min(2.3cqi, 17px); font-size: min(2.4cqi, 17.5px); }
  .hint-icon { width: min(5.6cqi, 41px); height: min(5.6cqi, 41px); }
  .hint-icon svg { width: min(2.8cqi, 21px); height: min(2.8cqi, 21px); }
  .stage-info { padding: min(3.8cqi, 28px) min(3.2cqi, 24px) min(3.2cqi, 24px); }
  .info-head { margin: 0 min(.6cqi, 5px) min(2.8cqi, 21px) min(1.2cqi, 9px); }
  .card-title { font-size: min(4cqi, 30px); }
  .info-ring { width: min(9cqi, 66px); height: min(9cqi, 66px); }
  .ring-icon { width: min(4cqi, 30px); height: min(4cqi, 30px); }
  .pet-specs { grid-auto-rows: minmax(0, min(12cqi, 92px)); gap: min(1.8cqi, 13px); align-content: space-evenly; }
  .pet-specs li { gap: min(2.4cqi, 18px); padding: 0 min(4cqi, 30px) 0 min(2.4cqi, 18px); }
  .spec-icon { width: min(3.6cqi, 27px); height: min(3.6cqi, 27px); padding: min(1.7cqi, 12.5px); }
  .spec-label, .spec-value { font-size: min(2.8cqi, 21px); }
  /* Same layout as the phone: name, photo, the two buttons and then the advertising. */
  .pet-greeting { margin-top: min(3cqi, 22px); }
  .pet-name { overflow-wrap: break-word; }
  .contact-actions { gap: min(2.2cqi, 16px); margin-top: min(2cqi, 15px); }
  /* The advertising keeps the full width and loses height: its card is shorter and the banner shows whole inside it, so the photo is the tallest thing on screen. */
  .ad-carousel { aspect-ratio: auto; height: min(34cqi, 26dvh); margin-top: min(2.2cqi, 17px); }
  .ad-slide img:not(.ad-backdrop) { object-fit: contain; }
  .contact-actions a { height: min(9.6cqi, 72px); gap: min(2.2cqi, 16px); padding: 0 min(3.4cqi, 25px) 0 min(1.6cqi, 12px); font-size: min(2.9cqi, 21.5px); }
  .contact-actions .icon { width: min(3.4cqi, 25px); height: min(3.4cqi, 25px); padding: min(2.2cqi, 16px); }
}

/* Stubby upright tablets (iPad mini, iPad 10.2"): a little tighter so the full-width advertising leaves room for the photo. */
@media (min-width: 600px) and (orientation: portrait) and (max-height: 1100px) and (min-aspect-ratio: 7/10) {
  .pet-profile { padding-top: max(20px, env(safe-area-inset-top)); padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .pet-greeting { gap: min(1cqi, 8px); margin-top: min(2.4cqi, 18px); }
  .greeting-lead { font-size: min(3.6cqi, 28px); }
  .pet-name { font-size: min(7.2cqi, 54px); }
  .pet-stage { margin-top: min(2.4cqi, 18px); }
  .ad-carousel { margin-top: min(1.8cqi, 14px); }
  .contact-actions { margin-top: min(1.8cqi, 14px); }
  .contact-actions a { height: min(9cqi, 68px); }
}

/* Sideways screens (tablets, desktop, phones on their side): photo on the left; name, buttons and advertising grouped and centred on the right. */
@media (min-width: 560px) and (orientation: landscape) {
  .pet-profile { --pad-y: 24px; --top-h: 44px; --top-gap: 16px; --col-gap: clamp(20px, 4vw, 56px); display: grid; flex: 0 1 auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto auto minmax(0, 1fr); grid-template-areas: "top top" "stage ." "stage greeting" "stage calls" "stage ad" "stage ."; column-gap: var(--col-gap); max-width: max(600px, calc(4 * 100dvh - 1052px)); margin-block: auto; padding: var(--pad-y) max(24px, 2.5vw, env(safe-area-inset-right)) var(--pad-y) max(24px, 2.5vw, env(safe-area-inset-left)); }
  .pet-top { grid-area: top; height: var(--top-h); min-height: 0; margin-bottom: var(--top-gap); }
  .pet-greeting { grid-area: greeting; align-self: start; margin-top: 0; }
  /* The photo fills the screen height, stays under 1.3 times its width, and stretches if the right column needs more room. */
  .pet-stage { grid-area: stage; min-height: clamp(240px, calc(100dvh - 2 * var(--pad-y) - var(--top-h) - var(--top-gap)), calc((100cqi - var(--col-gap)) / 2 * 1.3)); max-height: calc((100cqi - var(--col-gap)) / 2 * 1.3); margin-top: 0; }
  .contact-actions { grid-area: calls; margin: 16px 0 0; }
  .ad-carousel { grid-area: ad; margin-top: 16px; }
}

@media (min-width: 900px) and (min-height: 600px) and (orientation: landscape) {
  .pet-profile { --pad-y: 40px; --top-h: 52px; --top-gap: 28px; max-width: max(900px, calc(4 * 100dvh - 1400px)); }
  .contact-actions { margin-top: 24px; }
}

/* Big screens (Full HD computers, iPad Pro on its side): a wider layout with larger type, so it doesn't look small. */
@media (min-width: 1600px) and (min-height: 800px) and (orientation: landscape), (min-width: 1280px) and (min-height: 900px) and (orientation: landscape) {
  .pet-profile { --col-gap: 72px; max-width: max(1200px, calc(4 * 100dvh - 1456px)); }
  .greeting-lead { font-size: 36px; }
  .pet-name { font-size: 64px; }
  .contact-actions a { height: 76px; font-size: 20px; }
  .contact-actions .icon { width: 24px; height: 24px; padding: 16px; }
}

/* Very large monitors (1440p, 4K): type, buttons and spacing grow with the screen so the layout never looks tiny. */
@media (min-width: 2200px) and (min-height: 1100px) and (orientation: landscape) {
  .pet-profile { --pad-y: 2.2vw; --top-h: 2.6vw; --top-gap: 1.4vw; --col-gap: 3vw; --radius: 1.3vw; }
  .back-pill { height: 2.6vw; gap: .5vw; padding: .25vw 1vw .25vw .25vw; font-size: .8vw; }
  .back-pill-icon { width: 2vw; height: 2vw; }
  .back-pill-icon svg { width: 1vw; height: 1vw; }
  .pet-greeting { gap: .6vw; }
  .greeting-lead { font-size: 1.75vw; }
  .pet-name { font-size: 3.2vw; }
  .paw-trail svg { width: 1.2vw; height: 1.2vw; }
  .swipe-hint { bottom: 1vw; gap: .6vw; padding: .3vw 1.1vw .3vw .3vw; font-size: .8vw; }
  .tag-chip { top: 1vw; left: 1vw; height: 1.9vw; padding: 0 .8vw; font-size: .8vw; }
  .hint-icon { width: 1.9vw; height: 1.9vw; }
  .hint-icon svg { width: .9vw; height: .9vw; }
  .contact-actions { gap: .8vw; margin-top: 1.2vw; }
  .contact-actions a { height: 3.6vw; gap: .7vw; padding: 0 1.2vw 0 .5vw; font-size: 1vw; }
  .contact-actions .icon { width: 1.1vw; height: 1.1vw; padding: .75vw; }
  .ad-carousel { margin-top: .8vw; }
  .stage-info { padding: 1.3vw 1.1vw 1.1vw; }
  .info-head { margin: 0 .2vw 1vw .4vw; }
  .card-title { font-size: 1.4vw; }
  .info-ring { width: 3vw; height: 3vw; }
  .ring-icon { width: 1.35vw; height: 1.35vw; }
  .pet-specs { grid-auto-rows: minmax(0, 4vw); gap: .65vw; }
  .pet-specs li { gap: .85vw; padding: 0 1.4vw 0 .8vw; }
  .spec-icon { width: 1.3vw; height: 1.3vw; padding: .6vw; }
  .spec-label, .spec-value { font-size: 1vw; }
}

@media (orientation: landscape) and (max-height: 500px) {
  .pet-profile { --pad-y: 12px; --top-h: 40px; --top-gap: 10px; max-width: none; }
  /* Phones on their side: compact title, buttons in one row and the advertising below them. */
  .pet-greeting { gap: 4px; }
  .greeting-lead { font-size: 22px; }
  .contact-actions, .ad-carousel { margin-top: 8px; }
  .contact-actions { gap: 8px; }
  .contact-actions a { height: 44px; gap: 6px; padding: 0 10px 0 6px; font-size: 13px; }
  .contact-actions .icon { width: 16px; height: 16px; padding: 7px; }
  .swipe-hint { bottom: 8px; gap: 8px; padding: 4px 14px 4px 4px; font-size: 13px; }
  .tag-chip { top: 8px; left: 8px; height: 28px; padding: 0 11px; font-size: 13px; }
  .hint-icon { width: 26px; height: 26px; }
  .hint-icon svg { width: 14px; height: 14px; }
  /* Very short screens (a foldable on its side): the advertising narrows so the column still fits beside the photo. */
  .ad-carousel { width: min(100%, calc((100dvh - 2 * var(--pad-y) - var(--top-h) - var(--top-gap) - 130px) * 2)); }
}

/* ---------- Search (/buscar): graphite look of the profile, with the dog photo melting into the black ---------- */
/* No paw prints here: those belong to the profile. */
.finder-screen::after { content: none; }

/* Background photo: slowly drifts, and fades into black where the text and the form sit. */
.finder-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; container-type: size; pointer-events: none; }
.finder-screen:not(.is-loading) .finder-bg { animation: finder-bg-in 1.4s cubic-bezier(.2, .7, .2, 1) both; }
/* Until the photo and fonts are ready nothing is painted; if the script never runs, the page still shows after 4s. */
.finder-screen.is-loading > .finder, .finder-screen.is-loading > .finder-bg { opacity: 0; animation: finder-show 1ms 4s forwards; }
@keyframes finder-show { to { opacity: 1; } }
/* Older browsers: the photo simply fills the screen. */
.finder-bg img { position: absolute; top: -2%; left: -8%; display: block; width: 116%; height: 116%; object-fit: cover; object-position: 47% 34%; will-change: translate; backface-visibility: hidden; animation: finder-drift 26s ease-in-out infinite alternate; }
/* Upright screens: the puppy's eyes sit just under the text and its paws reach the search field. The photo's own edges fade into black, so it can be smaller than the screen. */
@supports (height: 1cqh) {
  .finder-bg img { --dog-h: max(88cqh, 125cqw); top: calc(50.8cqh - .405 * var(--dog-h)); left: calc(50cqw - .3459 * var(--dog-h)); width: auto; height: var(--dog-h); }
}
/* The text sits over the middle of the photo, so the whole picture is dimmed a little more there. */
.finder-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgb(10 10 10 / .12), rgb(10 10 10 / .12)), radial-gradient(120% 70% at 50% 50%, rgb(10 10 10 / .1) 0%, rgb(10 10 10 / .4) 70%, rgb(10 10 10 / .75) 100%), linear-gradient(180deg, #0a0a0a 0%, rgb(10 10 10 / .8) 12%, rgb(10 10 10 / .55) 28%, rgb(10 10 10 / .3) 48%, rgb(10 10 10 / .38) 62%, rgb(10 10 10 / .72) 80%, #0a0a0a 100%); }
@keyframes finder-bg-in { from { opacity: 0; } }
@keyframes finder-drift { from { translate: -1.4% -1.5%; } to { translate: 1.4% 1.5%; } }

.finder { position: relative; display: flex; flex: 1 0 auto; flex-direction: column; container-type: inline-size; width: 100%; margin-inline: auto; padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }

/* Entrance: each block rises in turn. */
.finder-screen:not(.is-loading) .finder > * { animation: rise-in 700ms cubic-bezier(.2, .7, .2, 1) backwards; }
.finder-screen:not(.is-loading) .finder > .finder-intro { animation-delay: 120ms; }
.finder-screen:not(.is-loading) .finder > .finder-form { animation-delay: 240ms; }

.finder-top { display: flex; align-items: center; min-height: 44px; }
.finder-logo { width: 96px; }

/* Title: one font for both lines, the Piero headline font (not the profile's). */
/* Title, text, field and button form one block in the middle of the screen. */
.finder-intro { margin-top: auto; text-align: center; }
.finder-title { margin: 0; color: #fff; text-shadow: 0 2px 18px rgb(0 0 0 / .55); font-family: "Manrope", var(--font); font-size: clamp(34px, 10vw, 42px); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; }
.finder-text { max-width: 30em; margin: 14px auto 0; color: rgb(255 255 255 / .72); text-shadow: 0 1px 12px rgb(0 0 0 / .6); font-size: 15px; line-height: 1.5; }

/* Tag field and search button at the bottom: grey glass pills with the icon in a white circle, like Llamar and WhatsApp. */
/* A moderate gap that grows with the screen height leaves the dog visible between the text and the search. */
.finder-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; width: min(100%, 290px); margin: clamp(24px, 12vh, 130px) auto auto; }
.finder-field { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 20px 0 8px; border-radius: 999px; background: rgb(28 28 28 / .88); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09); cursor: text; transition: box-shadow 160ms ease, background-color 160ms ease; }
.finder-field:focus-within { background: rgb(38 38 38 / .92); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .3), 0 0 0 4px rgb(255 255 255 / .06); }
.finder-field:has(input[aria-invalid="true"]) { box-shadow: inset 0 0 0 1px rgb(255 138 128 / .7); }
.finder-hash { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #0a0a0a; font-family: var(--font); font-size: 20px; font-weight: 600; line-height: 1; }
.finder-field input { flex: 1; width: 100%; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: #fff; font-family: var(--font); font-size: 22px; font-weight: 600; letter-spacing: .04em; }
.finder-field input::placeholder { color: rgb(255 255 255 / .35); opacity: 1; }
.finder-error { margin: 0; text-align: center; color: #ff8a80; font-size: 14px; line-height: 1.4; }
.finder-button { position: relative; display: flex; align-items: center; justify-content: center; height: 60px; padding: 0 56px; border: 0; border-radius: 999px; background: rgb(28 28 28 / .88); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09); color: #fff; font-family: var(--font); font-size: 16px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color 180ms ease, transform 180ms ease, opacity 180ms ease; -webkit-tap-highlight-color: transparent; }
.finder-button:hover { background: rgb(44 44 44 / .92); }
.finder-button:active { transform: scale(.97); }
.finder-button:disabled { cursor: progress; opacity: .7; }
.finder-button:focus-visible { outline: 2px solid rgb(255 255 255 / .6); outline-offset: 3px; }
.finder-button-icon { position: absolute; top: 50%; left: 8px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #0a0a0a; translate: 0 -50%; }
.finder-button-icon svg { position: relative; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
/* Radar pulse: two rings keep leaving the magnifier, as if it were searching. */
.finder-button-icon::before, .finder-button-icon::after { content: ''; position: absolute; inset: 0; border: 2px solid rgb(255 255 255 / .55); border-radius: 50%; animation: finder-ping 2.6s cubic-bezier(.2, .6, .3, 1) infinite; pointer-events: none; }
.finder-button-icon::after { animation-delay: 1.3s; }
@keyframes finder-ping { 0% { scale: 1; opacity: .8; } 100% { scale: 1.9; opacity: 0; } }

/* Short phones (iPhone SE, small Android): tighter spacing. */
@media (max-width: 599px) and (max-height: 739px) {
  /* Short phones: less room between the text and the search, so the puppy looks out a bit lower. */
  .finder-bg img { top: calc(53.4cqh - .405 * var(--dog-h)); }
  .finder { padding-top: max(14px, env(safe-area-inset-top)); padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .finder-top { min-height: 40px; }
  .finder-logo { width: 84px; }
  .finder-title { font-size: 32px; }
  .finder-text { margin-top: 10px; font-size: 14px; line-height: 1.45; }
  .finder-form { gap: 8px; margin-top: clamp(20px, 10vh, 104px); }
  .finder-field, .finder-button { height: 54px; }
  .finder-hash, .finder-button-icon { width: 40px; height: 40px; }
  .finder-field input { font-size: 20px; }
}

@media (max-width: 359px) {
  .finder-title { font-size: 29px; }
  .finder-text { font-size: 13.5px; }
}

/* Tablets upright: sizes grow with the width up to iPad Pro size; the field and the button share a row. */
@media (min-width: 600px) and (orientation: portrait) {
  /* On a tablet the text block is taller, so the puppy looks out a bit lower. */
  .finder-bg img { top: calc(57cqh - .405 * var(--dog-h)); }
  .finder { padding: max(4.5vw, env(safe-area-inset-top)) max(32px, 4.5vw, env(safe-area-inset-right)) max(4.5vw, env(safe-area-inset-bottom)) max(32px, 4.5vw, env(safe-area-inset-left)); }
  .finder-top { min-height: min(8cqi, 60px); }
  .finder-logo { width: min(21cqi, 156px); }
  .finder-title { font-size: min(9.6cqi, 86px); }
  .finder-text { margin-top: min(3cqi, 24px); font-size: min(3.2cqi, 26px); }
  .finder-form { grid-template-columns: minmax(0, 1fr) auto; gap: min(2.6cqi, 20px); width: min(100%, 86cqi, 700px); margin-top: clamp(24px, 13vh, 190px); }
  .finder-error { grid-column: 1 / -1; order: 3; }
  .finder-field, .finder-button { height: min(12.4cqi, 98px); }
  .finder-field { gap: min(2.6cqi, 20px); padding: 0 min(4cqi, 30px) 0 min(1.8cqi, 14px); }
  .finder-hash, .finder-button-icon { width: min(8.8cqi, 70px); height: min(8.8cqi, 70px); font-size: min(3.8cqi, 30px); }
  .finder-button-icon { left: min(1.8cqi, 14px); }
  .finder-button-icon svg { width: min(4cqi, 31px); height: min(4cqi, 31px); }
  .finder-field input { font-size: min(4.3cqi, 35px); }
  .finder-button { padding: 0 min(4.4cqi, 34px) 0 min(12.4cqi, 96px); font-size: min(3.4cqi, 27px); }
}

/* Sideways screens (tablets, computers, phones on their side): the photo shows on the right and melts into black on the left, where the text and the search sit. */
@media (min-width: 560px) and (orientation: landscape) {
  .finder-bg img { top: -8%; left: 28%; width: 80%; height: 116%; object-position: 50% 40%; }
  /* No mask over the moving photo (it made squares of the photo flash while redrawing): a fixed dark layer, solid over the text side, fades it instead. */
  .finder-bg::after { background: linear-gradient(90deg, #0a0a0a 0%, #0a0a0a 34%, rgb(10 10 10 / .72) 46%, rgb(10 10 10 / .3) 60%, rgb(10 10 10 / 0) 76%), linear-gradient(rgb(10 10 10 / .12), rgb(10 10 10 / .12)), linear-gradient(0deg, rgb(10 10 10 / .75) 0%, rgb(10 10 10 / 0) 32%), linear-gradient(180deg, rgb(10 10 10 / .55) 0%, rgb(10 10 10 / 0) 26%); }
  .finder { padding: 24px max(24px, 4vw, env(safe-area-inset-right)) 24px max(24px, 4vw, env(safe-area-inset-left)); }
  .finder > .finder-intro { width: min(100%, 46vw, 620px); }
  .finder > .finder-form { width: min(100%, clamp(290px, 30vw, 400px)); }
  .finder-intro { margin-top: auto; text-align: left; }
  .finder-text { margin-left: 0; }
  .finder-error { margin-left: 20px; text-align: left; }
  .finder-form { margin: 24px 0 auto; }
}

@media (min-width: 900px) and (min-height: 600px) and (orientation: landscape) {
  .finder { padding-block: 40px; }
  .finder-logo { width: 110px; }
  .finder-title { font-size: 52px; }
  .finder-text { margin-top: 16px; font-size: 17px; }
  .finder-form { gap: 14px; margin-top: 32px; }
  .finder-field, .finder-button { height: 68px; }
  .finder-hash, .finder-button-icon { width: 52px; height: 52px; font-size: 22px; }
  .finder-field input { font-size: 26px; }
  .finder-button { font-size: 18px; }
}

@media (min-width: 1600px) and (min-height: 800px) and (orientation: landscape), (min-width: 1280px) and (min-height: 900px) and (orientation: landscape) {
  .finder-logo { width: 126px; }
  .finder-title { font-size: 62px; }
  .finder-text { font-size: 19px; }
  .finder-field, .finder-button { height: 76px; }
  .finder-hash, .finder-button-icon { width: 58px; height: 58px; font-size: 24px; }
  .finder-button { font-size: 20px; }
}

/* Very large monitors: everything grows with the screen. */
@media (min-width: 2200px) and (min-height: 1100px) and (orientation: landscape) {
  .finder { padding: 2.2vw 4vw; }
  .finder > .finder-intro { width: 34vw; }
  .finder > .finder-form { width: 19vw; }
  .finder-logo { width: 5.6vw; }
  .finder-title { font-size: 3vw; }
  .finder-text { margin-top: .8vw; font-size: .95vw; }
  .finder-form { gap: .7vw; margin-top: 1.6vw; }
  .finder-field, .finder-button { height: 3.6vw; }
  .finder-field { gap: .7vw; padding: 0 1.2vw 0 .5vw; }
  .finder-hash, .finder-button-icon { width: 2.7vw; height: 2.7vw; font-size: 1.1vw; }
  .finder-button-icon { left: .5vw; }
  .finder-button-icon svg { width: 1.1vw; height: 1.1vw; }
  .finder-field input { font-size: 1.3vw; }
  .finder-button { padding: 0 1.5vw 0 3.8vw; font-size: 1vw; }
}

/* Phones on their side: compact sizes. */
@media (orientation: landscape) and (max-height: 500px) {
  .finder { padding-block: 12px; }
  .finder-top { min-height: 36px; }
  .finder-logo { width: 76px; }
  .finder-title { font-size: 28px; }
  .finder-text { margin-top: 6px; font-size: 13.5px; line-height: 1.4; }
  .finder-form { gap: 8px; margin-top: 14px; }
  .finder-field, .finder-button { height: 48px; }
  .finder-hash, .finder-button-icon { width: 36px; height: 36px; font-size: 17px; }
  .finder-field input { font-size: 18px; }
  .finder-button { padding: 0 16px 0 52px; font-size: 14px; }
  /* Field and button share a row so an error message still fits. */
  .finder > .finder-intro { width: min(100%, 62vw); }
  .finder > .finder-form { width: min(100%, 50vw, 400px); }
  .finder-form { grid-template-columns: minmax(0, 1fr) auto; }
  .finder-error { grid-column: 1 / -1; order: 3; margin-left: 16px; font-size: 13px; }
}