/* Shared density rules use CSS viewport widths, independent of device DPI.
   Preserve browser zoom and 16px form text to avoid focus zoom on iOS. */
@media (max-width: 899px) {
  :root { font-size: 14px; }
  body { font-size: 14px; }
  .public-app header { padding: 12px 14px 10px; gap: 10px; }
  .public-app .logo { font-size: 25px; gap: 5px; }
  .public-app .logo img { width: 42px; height: 42px; }
  .public-app .logo small { font-size: 12px; margin-top: 4px; }
  .public-app main { padding: 12px 14px 88px; }
  .public-app main > section { margin: 18px 0; }
  .public-app h1 { font-size: 25px; margin: 12px 0 8px; }
  .public-app h2 { font-size: 20px; margin-bottom: 10px; }
  .public-app h3 { font-size: 18px; }
  .public-app p { margin: 8px 0; line-height: 1.45; }
  .public-app .page-intro { font-size: 14px; margin-bottom: 16px; }
  .public-app button, .public-app .button { min-height: 44px; padding: 10px 14px; font-size: 14px; border-radius: 12px; gap: 7px; }
  .public-app input, .public-app select, .public-app textarea { font-size: 16px; min-height: 44px; padding: 10px 12px; }
  .public-app .hero { min-height: 164px; padding: 16px 14px; border-radius: 17px; }
  .public-app .hero h1 { font-size: 22px; margin: 0 0 8px; }


  .public-app .hero p { font-size: 14px; }
  .public-app .primary-actions { gap: 8px; }
  .public-app .primary-actions .button { min-height: 88px; padding: 12px 19px 12px 10px; font-size: 14px; border-radius: 14px; gap: 6px; }
  .public-app .primary-actions .button small { font-size: 12px; margin-top: 5px; }
  .public-app .primary-actions .button > svg:first-child { width: 18px; height: 18px; }
  .public-app .section-title { margin-bottom: 10px; gap: 8px; }
  .public-app .section-title h2 { font-size: 18px; }
  .public-app .section-title a { font-size: 12px; }
  .public-app .partner-invite { padding: 10px 12px; gap: 8px; }
  .public-app .partner-invite h3 { font-size: 16px; }
  .public-app .partner-invite p { font-size: 13px; }
  .public-app .cards { gap: 10px; }
  .public-app .card { border-radius: 13px; }
  .public-app .card img, .public-app .no-photo { height: 135px; }
  .public-app .card h3 { font-size: 17px; padding: 8px 10px 2px; }
  .public-app .card p { font-size: 12px; padding: 4px 10px 10px; }
  .public-app .card .badge { font-size: 11px; padding: 4px 6px; }
  .public-app .empty { min-height: 150px; padding: 16px 14px; }
  .public-app .empty-icon { width: 42px; height: 42px; margin-bottom: 8px; }
  .public-app .empty p { margin: 6px 0 12px; }
  .public-app .home-slide img { height: clamp(120px, 22vw, 180px); }
  .public-app .home-slide .home-slide-placeholder { min-height: clamp(120px, 22vw, 180px); padding: 16px; gap: 10px; }
  .public-app .empty h2, .public-app .empty h3 { font-size: 18px; }
  .public-app .empty p { font-size: 14px; }
  .public-app .panel, .public-app .settings-card, .public-app form { padding: 16px 14px; border-radius: 16px; }
  .public-app form, .public-app .field-grid { gap: 12px; }
  .public-app .form-stage, .public-app .location-fields { gap: 12px; padding-bottom: 16px; }
  .public-app .form-stage legend, .public-app .location-fields legend { font-size: 16px; }
  .public-app .profile-hero { padding: 16px 14px; gap: 10px; margin-bottom: 16px; }
  .public-app .profile-hero h1 { font-size: 23px; }
  .public-app .menu-group h2 { padding: 14px 14px 6px; font-size: 18px; }
  .public-app .menu-row { min-height: 64px; padding: 12px 14px; gap: 10px; }
  .public-app .menu-row strong { font-size: 14px; }
  .public-app .menu-row small { font-size: 12px; }
  .public-app .menu-row .menu-icon { width: 34px; height: 34px; }
  .public-app .category-grid { gap: 8px; margin: 14px 0 18px; }
  .public-app .category { min-height: 82px; padding: 9px 4px; font-size: 12px; border-radius: 13px; }
  .public-app .category > span { width: 34px; height: 34px; border-radius: 11px; }
  .public-app .service-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .public-app .service-cards .service-mobile-preview img { height: auto; }
  .public-app .service-cards .service-mobile-name { font-size: 12px; }
  .public-app .case-title { font-size: 27px; }
  .public-app .case-main-facts { gap: 10px; margin: 16px 0; }
  .public-app .case-main-facts section { padding: 14px; }
  .public-app .case-fact-value { font-size: 18px; }
  .public-app .case-fact-date { font-size: 16px; }
  .public-app .bottom { padding: 5px 8px max(6px, env(safe-area-inset-bottom)); }
  .public-app .bottom a { min-height: 48px; min-width: 44px; font-size: 11px; gap: 3px; }
  .public-app .bottom a > svg { width: 21px; height: 21px; }
  .public-app .bottom a.nav-alert > span { width: 44px; height: 44px; margin-top: -14px; }
  .public-app footer { margin-top: 22px; }
}
@media (min-width: 900px) {
  .public-app header { padding: 18px 28px 14px; }
  .public-app main { padding: 18px 28px 100px; }
  .public-app .hero { min-height: 240px; padding: 24px; }
  .public-app .primary-actions .button { min-height: 88px; font-size: 20px; padding: 16px; }
  .public-app .category { min-height: 92px; padding: 12px 6px; }
}

@media (max-width: 899px) {
.public-app { font-size:14px; }
.public-app .home-hero { min-height:195px; padding:16px 14px; }
.public-app .home-copy { width:56%; }
.public-app .home-copy h1 { font-size:20px; line-height:1.2; }
.public-app .home-copy p { font-size:14px; line-height:1.35; }
.public-app .bottom { padding:4px 6px 6px; border-radius:22px; }
.public-app .bottom .brand-icon { width:32px!important; height:32px!important; }
.public-app .bottom .nav-alert .brand-icon { width:44px!important; height:44px!important; }
.public-app .bottom a.nav-alert > span { width:44px; height:44px; margin-top:-8px; }
.public-app .empty-icon .brand-icon { width:40px!important; height:40px!important; }
}
@media (max-width: 899px) {
  .public-app .public-route { padding:12px 14px 96px; }
  .public-app .home-hero { height:205px; min-height:205px; }
  .public-app .home-copy p { margin-top:12px; }
}
@media (min-width: 900px) {
  .public-app .home-hero { height:280px; min-height:280px; padding:24px 28px; }
}

/* Second mobile density adjustment, preserving today's image/icon sources. */
@media (max-width: 899px) {
  :root { font-size:13px; }
  body, .public-app { font-size:13px; }
  .public-app header { padding:9px 12px 7px; }
  .public-app .logo { font-size:23px; }
  .public-app .logo img { width:36px; height:36px; }
  .public-app .logo small { font-size:11px; }
  .public-app .public-route { padding:10px 12px 88px; }
  .public-app main > section { margin:14px 0; }
  .public-app h1 { font-size:22px; }
  .public-app h2 { font-size:18px; }
  .public-app h3 { font-size:16px; }
  .public-app .page-intro { font-size:13px; margin-bottom:12px; }
  .public-app .home-hero { height:180px; min-height:180px; padding:13px 12px; margin-bottom:14px; }
  .public-app .home-copy h1 { font-size:18px; }
  .public-app .home-copy p { font-size:13px; margin-top:10px; }
  .public-app .primary-actions .button { min-height:76px; padding:10px 18px 10px 9px; font-size:13px; gap:5px; }
  .public-app .primary-actions .button small { font-size:11px; margin-top:4px; }
  .public-app .section-title { margin-bottom:8px; }
  .public-app .section-title h2 { font-size:16px; }
  .public-app .section-title a { font-size:11px; }
  .public-app .home-slide img { height:clamp(104px,20vw,160px); }
  .public-app .home-slide .home-slide-placeholder { min-height:clamp(104px,20vw,160px); padding:12px; }
  .public-app .home-slide-placeholder strong { font-size:20px; }
  .public-app .home-slides-caption { font-size:11px; }
  .public-app .chip { font-size:12px; padding:4px 10px; }
  .public-app .empty { min-height:130px; padding:13px 12px; margin:14px 0; }
  .public-app .empty h2, .public-app .empty h3 { font-size:16px; }
  .public-app .empty p { font-size:13px; margin:5px 0 10px; }
  .public-app .empty-icon { width:36px; height:36px; margin-bottom:6px; }
  .public-app .empty-icon .brand-icon { width:34px!important; height:34px!important; }
  .public-app .panel, .public-app .settings-card, .public-app form { padding:13px 12px; gap:10px; }
  .public-app .card img, .public-app .no-photo { height:118px; }
  .public-app .card h3 { font-size:15px; }
  .public-app .profile-hero { padding:13px 12px; }
  .public-app .menu-row { min-height:56px; padding:9px 12px; }
  .public-app .category { min-height:72px; padding:7px 4px; }
  .public-app .category > span { width:30px; height:30px; }
  .public-app .bottom a { min-height:44px; font-size:10px; }
  .public-app .bottom .brand-icon { width:28px!important; height:28px!important; }
  .public-app .bottom .nav-alert .brand-icon { width:38px!important; height:38px!important; }
  .public-app .bottom a.nav-alert > span { width:38px; height:38px; margin-top:-6px; }
  .public-app .case-title { font-size:24px; }
  .public-app .case-fact-value { font-size:16px; }
}

/* Show complete pet photos in listings without changing the image files. */
.public-app .card:not(.service-card) img,
.public-app .adoption-card img {
  object-fit:contain;
  object-position:center;
  background:#10272e;
}

/* Notification artwork supplied by the owner; preserve its original pixels. */
.public-app header .bell {
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  padding:0;
  border:0;
  box-shadow:none;
  background:transparent url('/assets/notification-paw-clean-20261021.png') center / 38px 38px no-repeat;
}
.public-app header .bell > svg,
.public-app header .bell > .brand-icon { display:none; }

/* Owner-supplied ad artwork is displayed whole at its native 3:1 ratio. */
.public-app .home-ad-image-link,
.public-app .guide-ad-banner a { display:block; width:100%; line-height:0; }
.public-app .home-slide .home-ad-image-link img,
.public-app .guide-ad-banner a img { display:block; width:100%; height:auto; aspect-ratio:3 / 1; object-fit:contain; }
.public-app .guide-ad-banner { margin:0 0 18px; }
.public-app .guide-ad-banner a { border-radius:16px; overflow:hidden; }
.banner-accessible-title { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }