/* MEO safety premium mineral design layer.
 * Cool neutral surfaces replace the previous beige range while preserving the
 * logo's navy and coral identity. Accessibility rules load after this file.
 */

body {
  text-rendering: optimizeLegibility;
}

:where(main, [role="main"]) {
  isolation: isolate;
}

:where(main, [role="main"]) :where(h1, h2, h3) {
  text-wrap: balance;
}

:where(main, [role="main"]) :where(p, li) {
  text-wrap: pretty;
}

.public-header {
  box-shadow: 0 10px 34px rgba(16, 45, 58, .055);
}

.public-primary a,
.public-signin,
.public-cta {
  letter-spacing: -.012em;
}

.public-newsletter {
  border: 0;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .18);
}

.public-footer nav a,
.public-cookie-link {
  padding-block: 3px;
  line-height: 1.45;
}

.public-dialog {
  border: 0;
}

.mk-hero {
  background:
    radial-gradient(circle at 84% 12%, var(--sky, #e4f0f5) 0%, transparent 36%),
    linear-gradient(180deg, var(--white, #fff) 0%, var(--paper, #f3f6f8) 100%);
}

.mk-hero h1 {
  line-height: .94;
  letter-spacing: -.058em;
}

.mk-section-head h2,
.mk-how h2,
.mk-benelux h2,
.mk-privacy h2,
.mk-final h2 {
  line-height: 1;
  letter-spacing: -.052em;
}

.mk-hero-copy > p,
.mk-section-head > p,
.mk-how-intro > p,
.mk-benelux > div > p,
.mk-privacy p,
.mk-final p {
  max-width: 68ch;
  line-height: 1.7;
}

.mk-feature,
.mk-country-list article,
.mk-story-card {
  border: 0;
  box-shadow: 0 20px 58px rgba(16, 45, 58, .09);
}

.mk-feature.light,
.mk-country-list article,
.mk-story {
  background: var(--white, #fff);
}

.mk-how {
  background: var(--navy, #102d3a);
}

.mk-feature.earth {
  background: linear-gradient(145deg, #f9d9d1 0%, #f6b7aa 100%);
}

.mk-benelux {
  background: linear-gradient(145deg, #e4f0f5 0%, #f3f6f8 100%);
}

.mk-final {
  background: linear-gradient(135deg, #f8d4cc 0%, #e4f0f5 100%);
}

.mk-text-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  
  
}

.auth-card,
.card,
.safe-card,
.device-card,
.pet-roster-card,
.profile-hero,
.settings-menu,
.settings-content,
.family-panel,
.admin-panel,
.admin-metrics article,
.vet-card,
.vet-form-shell {
  border: 0;
  box-shadow: 0 22px 64px rgba(16, 45, 58, .085);
}

.auth-card,
.card,
.device-card,
.pet-roster-card,
.profile-hero,
.settings-menu,
.settings-content {
  background: var(--white, var(--panel, #fff));
}

:where(.auth-story, .mk-section-head, .mk-how-intro, .family-hero, .admin-intro, .vet-section-head) > p {
  max-width: 68ch;
  line-height: 1.7;
}

@media (max-width: 560px) {
  .mk-hero h1 {
    font-size: calc(clamp(44px, 14vw, 56px) - 2.6667px);
    line-height: .98;
    letter-spacing: -.048em;
  }

  .mk-section-head h2,
  .mk-how h2,
  .mk-benelux h2,
  .mk-privacy h2,
  .mk-final h2 {
    font-size: calc(clamp(38px, 11vw, 48px) - 2.6667px);
    line-height: 1.03;
  }
}

@media (prefers-contrast: more) {
  .public-header {
    border-bottom: 2px solid var(--ink, #18323c);
    box-shadow: none;
  }

  .public-cta,
  .auth-card,
  .card,
  .mk-feature {
    box-shadow: none;
  }

  .public-footer nav a,
  .public-cookie-link {
    color: #fff;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mk-story-card img,
  .public-cta,
  .vet-button,
  .theme-toggle {
    transition: none !important;
  }
}