/* Pawnda marketing site: index, about, careers, credits, 404, privacy and terms.
   Built on tokens.css and components.css, which load first. Violet on night, paper by day.
   Every color comes from a token; alpha variants use color-mix() on a token.
   Type: at most 8 sizes per breakpoint. Desktop: 64, 44, 32, 22, 20, 16, 14, 13. */

/* Metric-matched fallbacks keep the hero from shifting when the web fonts arrive. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 107%; ascent-override: 90.5%; descent-override: 22.5%; line-gap-override: 0%;
}
@font-face {
  font-family: "Rubik Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 104%; ascent-override: 89%; descent-override: 24%; line-gap-override: 0%;
}

/* ------------------------------------------------------------------ 1. Page scope and local aliases */
.mk {
  --mk-font-display: "Rubik", "Rubik Fallback", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --mk-font-text: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Night steps (aliases of tokens): page, raised night surface, controls on night */
  --mk-night: var(--pd-bg-night);
  --mk-night-1: var(--pd-brand-950);
  --mk-night-3: var(--pd-bg-rail-active);
  --mk-night-line: color-mix(in srgb, var(--pd-text-on-night) 8%, transparent);
  --mk-night-line-2: color-mix(in srgb, var(--pd-text-on-night) 14%, transparent);
  --mk-on-night: var(--pd-neutral-0);
  --mk-on-night-2: var(--pd-text-on-night-secondary);
  --mk-on-night-3: var(--pd-text-on-night-tertiary);
  --mk-paper: var(--pd-paper);
  --mk-paper-2: color-mix(in srgb, var(--pd-paper) 96%, var(--pd-brand-950));

  --mk-glow-media: 0 0 0 1px color-mix(in srgb, var(--pd-brand-400) 16%, transparent),
                   0 32px 80px -24px color-mix(in srgb, var(--pd-brand-600) 50%, transparent),
                   0 80px 160px -60px color-mix(in srgb, var(--pd-brand-400) 35%, transparent);
  --mk-shadow-media: 0 2px 6px color-mix(in srgb, var(--pd-brand-950) 5%, transparent),
                     0 24px 48px -16px color-mix(in srgb, var(--pd-brand-950) 20%, transparent),
                     0 64px 120px -48px color-mix(in srgb, var(--pd-brand-600) 28%, transparent);
  /* Film grain against banding on night bands (a texture, not a color) */
  --mk-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* Shapes used as masks, so their color can come from a token */
  --mk-mask-paw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1.5 128 93'%3E%3Cellipse cx='34' cy='16' rx='13.1' ry='17'/%3E%3Cellipse cx='94' cy='16' rx='13.1' ry='17'/%3E%3Cellipse cx='11.5' cy='47.4' rx='11.25' ry='14.7'/%3E%3Cellipse cx='116.5' cy='47.4' rx='11.25' ry='14.7'/%3E%3Cpath d='M64 39C83 39 100.5 54 101.2 69.5 101.8 82 97 90.3 87.5 90.3 79.5 90.3 73.5 86.2 64 86.2 54.5 86.2 48.5 90.3 40.5 90.3 31 90.3 26.2 82 26.8 69.5 27.5 54 45 39 64 39Z'/%3E%3C/svg%3E");
  --mk-mask-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v4.5M12 16h.01'/%3E%3C/svg%3E");

  --mk-nav-h: 64px;
  --mk-gutter: clamp(20px, 4vw, 32px);
  --mk-section-y: 112px;
  --mk-head-gap: 48px;
  --mk-hero-overlap: 168px;
  --mk-seam-gap: 72px;

  --mk-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --mk-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --mk-dur-1: 120ms;
  --mk-dur-2: 200ms;
  --mk-dur-3: 320ms;
  --mk-dur-4: 560ms;
  --mk-dur-5: 900ms;

  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--mk-paper);
  color: var(--pd-text-primary);
  font: var(--pd-type-mk-body);
  font-family: var(--mk-font-text);
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
}
/* Reset at zero specificity so every component rule below wins without a fight. */
.mk [hidden] { display: none !important; }
:where(.mk) main { flex: 1 0 auto; }
:where(.mk) *, :where(.mk) *::before, :where(.mk) *::after { box-sizing: border-box; }
:where(.mk) :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd) { margin: 0; }
:where(.mk) :where(ul, ol) { padding: 0; list-style: none; }
:where(.mk) :where(img, svg, video) { display: block; max-width: 100%; }
:where(.mk) img { height: auto; }
:where(.mk) a { color: inherit; }
:where(.mk) button { font: inherit; color: inherit; }
:where(.mk) cite { font-style: normal; }
html:has(body.mk) { scroll-padding-top: 88px; scroll-behavior: smooth; scrollbar-gutter: stable; }
.mk :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--pd-brand-600); outline-offset: 2px; }
.mk [data-canvas="night"] :where(a, button, summary, [tabindex]):focus-visible,
.mk .mk-footer :where(a, button):focus-visible,
.mk .mk-nav[data-theme="night"] :where(a, button):focus-visible { outline-color: var(--pd-brand-300); }

.mk-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mk-skip {
  position: fixed; left: 16px; top: 12px; z-index: 200; transform: translateY(-160%);
  padding: 10px 16px; border-radius: var(--pd-radius-full); background: var(--pd-brand-950); color: var(--pd-neutral-0);
  font: 600 14px / 20px var(--mk-font-text); text-decoration: none; transition: transform var(--mk-dur-2) var(--mk-ease-out);
}
.mk-skip:focus { transform: translateY(0); }
.mk .mk-skip:focus-visible { outline-color: var(--pd-brand-300); }
.mk-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ------------------------------------------------------------------ 2. Layout */
.mk-container { width: min(100% - 2 * var(--mk-gutter), 1200px); margin-inline: auto; }
.mk-section { position: relative; padding-block: var(--mk-section-y); }
.mk-section--paper2 { background: var(--mk-paper-2); }
.mk-night {
  position: relative;
  background-color: var(--mk-night);
  background-image: var(--mk-noise), radial-gradient(60% 45% at 50% 0%, color-mix(in srgb, var(--pd-brand-400) 20%, transparent), transparent 70%);
  color: var(--mk-on-night-2);
  isolation: isolate;
}
.mk-night :is(h1, h2, h3) { color: var(--mk-on-night); }

.mk-head { display: grid; justify-items: center; text-align: center; gap: 16px; margin-bottom: var(--mk-head-gap); }
.mk-head .mk-lead { margin-top: 4px; }
.mk-head--left { justify-items: start; text-align: left; }
.mk-head__note { max-width: 40em; font: var(--pd-type-mk-body-sm); font-family: var(--mk-font-text); color: var(--pd-text-tertiary); text-wrap: balance; }
.mk-head__note cite { color: var(--pd-text-tertiary); }
.mk-head__note cite::before { content: "· "; }

/* ------------------------------------------------------------------ 3. Type */
.mk-h1 {
  font: var(--pd-type-mk-display-1); font-family: var(--mk-font-display);
  letter-spacing: -0.025em; text-wrap: balance;
}
.mk-h2 {
  font: var(--pd-type-mk-display-2); font-family: var(--mk-font-display);
  letter-spacing: -0.02em; text-wrap: balance; max-width: 20em;
}
.mk-h3 {
  font: var(--pd-type-mk-title); font-family: var(--mk-font-display);
  letter-spacing: -0.01em; text-wrap: balance; color: var(--pd-text-primary);
}
.mk-night .mk-h3 { color: var(--mk-on-night); }
.mk-lead {
  font: var(--pd-type-mk-lead); font-family: var(--mk-font-text);
  letter-spacing: -0.005em; color: var(--pd-text-secondary); max-width: 36em; text-wrap: pretty;
}
.mk-night .mk-lead { color: var(--mk-on-night-2); }
.mk-body-lg { font: var(--pd-type-mk-body-lg); font-family: var(--mk-font-text); color: var(--pd-text-secondary); text-wrap: pretty; }
.mk-body { font: var(--pd-type-mk-body); font-family: var(--mk-font-text); color: var(--pd-text-secondary); text-wrap: pretty; }
.mk-small { font: var(--pd-type-mk-body-sm); font-family: var(--mk-font-text); color: var(--pd-text-tertiary); text-wrap: pretty; }
.mk-overline {
  font: var(--pd-type-mk-overline); font-family: var(--mk-font-text);
  letter-spacing: var(--pd-tracking-overline-mk); text-transform: uppercase; color: var(--pd-brand-600);
}
.mk-night .mk-overline { color: var(--pd-brand-300); }
.mk-nowrap { white-space: nowrap; }

/* ------------------------------------------------------------------ 4. Icons */
.mk-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.mk-icon--fill { fill: currentColor; stroke: none; }
.mk-paw { display: block; fill: currentColor; }

/* ------------------------------------------------------------------ 5. Buttons and links (extends .pd-btn) */
.mk .pd-btn { text-decoration: none; font-family: var(--mk-font-text); }
.mk .pd-btn--lg { height: 48px; padding: 0 22px; font: 600 16px / 20px var(--mk-font-text); }
.mk .pd-btn .mk-icon { width: 18px; height: 18px; }
.mk .pd-btn--primary { transition: background-color var(--mk-dur-1) var(--pd-ease-standard), box-shadow var(--mk-dur-2) var(--pd-ease-standard), transform 80ms var(--pd-ease-standard); }
.mk [data-canvas="night"] .pd-btn--primary,
.mk .mk-night .pd-btn--primary {
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--pd-neutral-0) 18%, transparent), 0 8px 24px -8px color-mix(in srgb, var(--pd-brand-400) 60%, transparent);
}
.mk [data-canvas="night"] .pd-btn--primary:hover,
.mk .mk-night .pd-btn--primary:hover {
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--pd-neutral-0) 22%, transparent), 0 10px 30px -8px color-mix(in srgb, var(--pd-brand-400) 75%, transparent);
}
.mk-btn-ghost-night {
  background: color-mix(in srgb, var(--pd-text-on-night) 4%, transparent); color: var(--mk-on-night) !important;
  border: 1px solid color-mix(in srgb, var(--pd-text-on-night) 22%, transparent) !important;
}
.mk-btn-ghost-night:hover { background: color-mix(in srgb, var(--pd-text-on-night) 10%, transparent) !important; border-color: color-mix(in srgb, var(--pd-text-on-night) 32%, transparent) !important; }
.mk-btn-ghost-night:active { background: color-mix(in srgb, var(--pd-text-on-night) 14%, transparent) !important; }
/* The pet owner's button: a violet outline beside the solid primary. One look on paper, one on a
   night band; the bar's owner button takes the night look while the nav is over a night band. */
.mk .mk-btn-outline { background: transparent; color: var(--pd-brand-700); border-color: var(--pd-brand-500); }
.mk .mk-btn-outline:hover { background: var(--pd-brand-50); border-color: var(--pd-brand-600); }
.mk .mk-btn-outline:active { background: var(--pd-brand-100); }
.mk .mk-btn-outline-night,
.mk-nav[data-theme="night"] .mk-nav__owner {
  background: color-mix(in srgb, var(--pd-brand-500) 22%, transparent); color: var(--mk-on-night);
  border-color: var(--pd-brand-400);
}
.mk .mk-btn-outline-night:hover,
.mk-nav[data-theme="night"] .mk-nav__owner:hover { background: color-mix(in srgb, var(--pd-brand-500) 36%, transparent); border-color: var(--pd-brand-300); }
.mk .mk-btn-outline-night:active,
.mk-nav[data-theme="night"] .mk-nav__owner:active { background: color-mix(in srgb, var(--pd-brand-500) 44%, transparent); }
.mk-play-dot {
  display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%;
  background: color-mix(in srgb, var(--pd-brand-400) 22%, transparent); color: var(--pd-brand-300);
}
.mk-play-dot .mk-icon { width: 12px; height: 12px; }
.mk-btn-meta { font-weight: 500; color: var(--mk-on-night-3); font-variant-numeric: tabular-nums; }
.mk .pd-btn .mk-arrow, .mk-link .mk-arrow { transition: transform var(--mk-dur-2) var(--mk-ease-out); }
.mk .pd-btn:hover .mk-arrow, .mk-link:hover .mk-arrow { transform: translateX(2px); }

.mk-link {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 16px / 24px var(--mk-font-text); color: var(--pd-brand-600); text-decoration: none;
  border-radius: 6px; background: none; border: 0; padding: 0; cursor: pointer;
}
.mk-link .mk-icon { width: 16px; height: 16px; }
.mk-link:hover { color: var(--pd-brand-700); }
.mk-link:hover span { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.mk-night .mk-link { color: var(--pd-brand-300); }
.mk-night .mk-link:hover { color: var(--mk-on-night); }
.mk-link--sm { font-size: 14px; line-height: 20px; }
.mk-textlink { color: var(--pd-text-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.mk-textlink:hover { color: var(--pd-text-link-hover); text-decoration-color: currentColor; }
.mk-night .mk-textlink { color: var(--pd-brand-300); }
.mk-night .mk-textlink:hover { color: var(--mk-on-night); }
button.mk-textlink { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }

/* ------------------------------------------------------------------ 6. Chips (mirror the product's provenance chips: glyph plus word) */
.mk-chip {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px;
  border-radius: var(--pd-radius-full); border: 1px solid var(--pd-border-default);
  background: var(--pd-bg-surface); color: var(--pd-text-secondary);
  font: var(--pd-type-mk-caption); font-family: var(--mk-font-text); font-variant-numeric: tabular-nums;
  white-space: nowrap; vertical-align: middle;
}
.mk-chip .mk-icon { width: 13px; height: 13px; stroke-width: 2; }
.mk-chip:has(.mk-icon:first-child) { padding-left: 7px; }
.mk-chip--source { color: var(--pd-text-secondary); }
.mk-chip--source .mk-icon { color: var(--pd-brand-600); }
.mk-chip--unverified { background: var(--pd-warning-tint); border-color: var(--pd-warning-border); color: var(--pd-warning-text); }
.mk-chip--verified { background: var(--pd-success-tint); border-color: var(--pd-success-border); color: var(--pd-success-text); }
.mk-chip--owner { background: var(--pd-home-tint); border-color: var(--pd-home-border); color: var(--pd-home-text); }
.mk-chip--brand { background: var(--pd-brand-50); border-color: var(--pd-brand-100); color: var(--pd-brand-700); }
.mk-chip--night { background: var(--mk-night-3); border-color: var(--mk-night-line); color: var(--mk-on-night-2); }
.mk-chip--night .mk-icon { color: var(--pd-brand-300); }
.mk-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ------------------------------------------------------------------ 7. Pill */
.mk-pill {
  display: inline-flex; align-items: center; gap: 10px; min-height: 32px; padding: 4px 12px 4px 4px;
  border-radius: var(--pd-radius-full);
  background: color-mix(in srgb, var(--pd-brand-400) 12%, transparent); border: 1px solid color-mix(in srgb, var(--pd-brand-400) 28%, transparent);
  font: 500 13px / 18px var(--mk-font-text); color: var(--mk-on-night-2); text-decoration: none;
  transition: background-color var(--mk-dur-2) var(--pd-ease-standard), border-color var(--mk-dur-2) var(--pd-ease-standard);
}
.mk-pill:hover { background: color-mix(in srgb, var(--pd-brand-400) 18%, transparent); border-color: color-mix(in srgb, var(--pd-brand-400) 40%, transparent); color: var(--mk-on-night); }
.mk-pill__label {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--pd-radius-full);
  background: color-mix(in srgb, var(--pd-brand-400) 20%, transparent); color: var(--pd-brand-200); font-weight: 600;
}
.mk-pill .mk-icon { width: 14px; height: 14px; color: var(--pd-brand-300); }

/* ------------------------------------------------------------------ 8. Frames for real captures */
.mk-frame { position: relative; border-radius: 16px; overflow: hidden; }
.mk-frame__bar { position: relative; display: flex; align-items: center; height: 40px; padding: 0 16px; }
.mk-frame__dots { display: flex; gap: 8px; }
.mk-frame__dots i { display: block; width: 10px; height: 10px; border-radius: 50%; }
.mk-frame__url {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: min(260px, 46%); height: 24px; border-radius: var(--pd-radius-full);
  font: 500 13px / 16px var(--mk-font-text); white-space: nowrap;
}
.mk-frame__url .mk-icon { width: 11px; height: 11px; stroke-width: 2.2; }
.mk-frame__body { position: relative; aspect-ratio: 16 / 10; background: var(--pd-bg-surface); }
/* A failed image shows the placeholder, not raw alt text (assistive tech still reads the alt) */
.mk-frame__body img, .mk-phone__screen img { color: transparent; }
.mk-frame__body > picture, .mk-frame__body > img, .mk-frame__body > picture img { width: 100%; height: 100%; }
.mk-frame__body img { object-fit: cover; object-position: top left; }
.mk-frame--night { background: var(--mk-night-1); border: 1px solid var(--mk-night-line); box-shadow: var(--mk-glow-media); }
.mk-frame--night .mk-frame__bar { background: var(--mk-night-1); }
.mk-frame--night .mk-frame__dots i { background: color-mix(in srgb, var(--pd-text-on-night) 20%, transparent); }
.mk-frame--night .mk-frame__url { background: var(--mk-night-3); color: var(--mk-on-night-3); }
.mk-frame--paper { background: var(--pd-neutral-50); border: 1px solid var(--pd-border-subtle); box-shadow: var(--mk-shadow-media); }
.mk-frame--paper .mk-frame__bar { background: var(--pd-neutral-50); border-bottom: 1px solid var(--pd-border-subtle); }
.mk-frame--paper .mk-frame__dots i { background: var(--pd-neutral-200); }
.mk-frame--paper .mk-frame__url { background: var(--pd-neutral-100); color: var(--pd-text-tertiary); }

.mk-phone {
  --w: 300px;
  position: relative; width: var(--w); padding: calc(var(--w) * 0.03); border-radius: calc(var(--w) * 0.153);
  background: var(--pd-neutral-950);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pd-neutral-0) 7%, transparent),
              0 0 0 1px color-mix(in srgb, var(--pd-neutral-950) 50%, transparent),
              0 30px 60px -20px color-mix(in srgb, var(--pd-neutral-950) 55%, transparent),
              0 60px 120px -40px color-mix(in srgb, var(--pd-brand-600) 40%, transparent);
}
.mk-phone__screen { position: relative; overflow: hidden; border-radius: calc(var(--w) * 0.123); aspect-ratio: 1206 / 2622; background: var(--pd-bg-sunken); }
.mk-phone__screen img { width: 100%; height: 100%; object-fit: cover; }

/* Media placeholders: never an empty white box while an image loads. A faint paw sits under
   every capture and is covered the moment the image paints. */
.mk-media { position: relative; isolation: isolate; background: linear-gradient(180deg, var(--pd-neutral-50), var(--pd-neutral-100)); }
.mk-media::before {
  content: ""; position: absolute; inset: 0; z-index: -1; margin: auto; width: 56px; height: 41px;
  background: color-mix(in srgb, var(--pd-brand-600) 16%, transparent);
  -webkit-mask: var(--mk-mask-paw) center / contain no-repeat; mask: var(--mk-mask-paw) center / contain no-repeat;
}

/* ------------------------------------------------------------------ 9. Nav */
.mk-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--mk-nav-h);
  border-bottom: 1px solid transparent;
  transition: background-color var(--mk-dur-2) var(--pd-ease-standard), border-color var(--mk-dur-2) var(--pd-ease-standard), backdrop-filter var(--mk-dur-2) var(--pd-ease-standard);
}
.mk-nav__inner { position: relative; display: flex; align-items: center; height: 100%; gap: 24px; }
.mk-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; border-radius: 8px; flex: none; }
.mk-brand__glyph { width: 26px; height: 19px; color: var(--pd-brand-600); }
.mk-brand__word { font: 700 20px / 1 var(--mk-font-display); letter-spacing: -0.02em; color: var(--pd-text-primary); }
.mk-nav__links { position: relative; display: flex; align-items: center; gap: 4px; margin: 0 auto; }
.mk-nav__link {
  position: relative; display: inline-flex; align-items: center; height: 40px; padding: 0 12px; border-radius: var(--pd-radius-full);
  font: 500 14px / 20px var(--mk-font-text); text-decoration: none; color: var(--pd-text-secondary);
  transition: color var(--mk-dur-1) var(--pd-ease-standard), background-color var(--mk-dur-1) var(--pd-ease-standard);
}
.mk-nav__link:hover { color: var(--pd-text-primary); background: var(--pd-fill-hover); }
.mk-nav__link[aria-current="true"] { color: var(--pd-text-primary); }
.mk-nav__indicator {
  position: absolute; left: 0; bottom: 3px; height: 2px; width: 1px; border-radius: 2px;
  background: var(--pd-brand-600); opacity: 0; transform-origin: left center; pointer-events: none;
  transition: transform var(--mk-dur-3) var(--mk-ease-out), opacity var(--mk-dur-2) var(--pd-ease-standard);
}
.mk-nav__indicator.is-on { opacity: 1; }
.mk-nav__actions { display: flex; align-items: center; gap: 8px; flex: none; }
.mk-nav .pd-btn { height: 36px; padding: 0 14px; font: 600 14px / 20px var(--mk-font-text); }
.mk-nav__signin { background: transparent; color: var(--pd-text-secondary); }
.mk-nav__signin:hover { background: var(--pd-fill-hover); color: var(--pd-text-primary); }
.mk-nav__menu-btn {
  display: none; place-items: center; width: 44px; height: 44px; margin-right: -8px; padding: 0;
  border: 0; border-radius: 12px; background: transparent; color: var(--pd-text-primary); cursor: pointer; text-decoration: none;
}
.mk-nav__menu-btn:hover { background: var(--pd-fill-hover); }
.mk-nav__menu-btn .mk-icon { width: 22px; height: 22px; }

.mk-nav[data-theme="paper"] {
  background: color-mix(in srgb, var(--pd-paper) 82%, transparent); border-bottom-color: color-mix(in srgb, var(--pd-brand-950) 8%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
}
/* The night bar is solid by default, so it stays readable over paper if marketing.js never runs.
   With the script live (html.mk-live), it is clear at the top of a night band. */
.mk-nav[data-theme="night"] {
  background: color-mix(in srgb, var(--pd-bg-night) 86%, transparent); border-bottom-color: var(--mk-night-line);
  -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px);
}
.mk-live .mk-nav[data-theme="night"]:not(.is-scrolled) {
  background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.mk-nav[data-theme="night"] .mk-brand__glyph { color: var(--pd-brand-400); }
.mk-nav[data-theme="night"] .mk-brand__word { color: var(--mk-on-night); }
.mk-nav[data-theme="night"] .mk-nav__link, .mk-nav[data-theme="night"] .mk-nav__signin { color: var(--mk-on-night-2); }
.mk-nav[data-theme="night"] .mk-nav__link:hover, .mk-nav[data-theme="night"] .mk-nav__signin:hover { color: var(--mk-on-night); background: color-mix(in srgb, var(--pd-text-on-night) 8%, transparent); }
.mk-nav[data-theme="night"] .mk-nav__link[aria-current="true"] { color: var(--mk-on-night); }
.mk-nav[data-theme="night"] .mk-nav__indicator { background: var(--pd-brand-400); }
.mk-nav[data-theme="night"] .mk-nav__menu-btn { color: var(--mk-on-night); }
.mk-nav[data-theme="night"] .mk-nav__menu-btn:hover { background: color-mix(in srgb, var(--pd-text-on-night) 8%, transparent); }
.mk-nav[data-theme="night"] .pd-btn--primary { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--pd-neutral-0) 18%, transparent), 0 6px 18px -8px color-mix(in srgb, var(--pd-brand-400) 70%, transparent); }

/* Mobile menu: a native dialog sheet from the top */
.mk-menu {
  position: fixed; inset: 0 0 auto 0; width: 100%; max-width: none; max-height: 100dvh; margin: 0; padding: 0;
  border: 0; border-radius: 0 0 24px 24px; background: var(--mk-paper); color: var(--pd-text-primary);
  box-shadow: 0 24px 64px -16px color-mix(in srgb, var(--pd-bg-night) 45%, transparent); overflow: auto;
}
.mk-menu::backdrop { background: color-mix(in srgb, var(--pd-bg-night) 40%, transparent); }
.mk-menu__head { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 var(--mk-gutter); border-bottom: 1px solid var(--pd-border-subtle); }
.mk-menu__head .mk-nav__menu-btn { display: grid; }
.mk-menu__links { padding: 8px var(--mk-gutter) 0; }
.mk-menu__links a {
  display: flex; align-items: center; justify-content: space-between; min-height: 56px; border-bottom: 1px solid var(--pd-border-subtle);
  font: 600 20px / 26px var(--mk-font-display); letter-spacing: -0.01em; text-decoration: none; color: var(--pd-text-primary);
}
.mk-menu__links a .mk-icon { width: 18px; height: 18px; color: var(--pd-text-tertiary); }
.mk-menu__foot { display: grid; gap: 10px; padding: 20px var(--mk-gutter) 24px; }
.mk-menu__foot .pd-btn { width: 100%; height: 48px; font-size: 16px; }
/* The owner button's words are long: on the narrowest phones they take two lines instead of pushing the sheet wider. */
.mk-menu__foot .mk-menu__owner { height: auto; min-height: 48px; padding-block: 10px; white-space: normal; text-align: center; text-wrap: balance; }

/* ------------------------------------------------------------------ 10. Hero */
/* flow-root keeps the stage's negative margin inside the hero, so the product frame
   crosses the seam into the paper section instead of ending on it. */
.mk-hero { display: flow-root; padding-top: calc(var(--mk-nav-h) + 72px); padding-bottom: 0; z-index: 1; }
.mk-hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 70%; z-index: -1; pointer-events: none;
  background: radial-gradient(55% 60% at 55% 70%, color-mix(in srgb, var(--pd-brand-600) 30%, transparent), transparent 70%);
}
.mk-hero__inner { display: grid; justify-items: center; text-align: center; max-width: 900px; margin-inline: auto; }
.mk-hero__title { margin-top: 28px; color: var(--mk-on-night); }
.mk-hero__line { display: block; }
.mk-hero__lead { margin-top: 24px; max-width: 34em; }
/* Two audiences, one button each, and a label over each that says who it is for. Vets come
   first and hold the solid button; pet owners get the outlined one. The film is a link under the pair. */
.mk-hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 24px 20px; margin-top: 32px; }
.mk-audience { display: grid; justify-items: center; gap: 10px; }
/* The film link's box is taller than its words (a comfortable target), so the margins take that
   padding back: the words sit 20px under the buttons, and the stage keeps its distance. */
.mk-hero__micro { margin: 12px 0 -8px; }
.mk-hero__film {
  display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 12px 0 6px; border-radius: var(--pd-radius-full);
  font: 600 14px / 20px var(--mk-font-text); color: var(--mk-on-night); text-decoration: none; white-space: nowrap;
  transition: background-color var(--mk-dur-1) var(--pd-ease-standard);
}
.mk-hero__film:hover { background: color-mix(in srgb, var(--pd-text-on-night) 8%, transparent); }

.mk-hero__stage { position: relative; z-index: 2; margin-top: 64px; margin-bottom: calc(-1 * var(--mk-hero-overlap)); }
/* The two devices stand side by side on one line: the phone, a gap, then the browser. Nothing
   overlaps, their bottoms align exactly, and so both cross the night-to-paper seam by the same
   amount. The caption has its own row under the browser, below the seam, on paper. */
.mk-hero__comp {
  --mk-hero-phone-w: 248px;
  display: grid; grid-template-columns: var(--mk-hero-phone-w) minmax(0, 1fr);
  grid-template-areas: "phone frame" ". caption"; column-gap: 28px; align-items: end;
}
.mk-hero__frame { grid-area: frame; min-width: 0; }
.mk-hero__frame .mk-frame__body { aspect-ratio: 16 / 10; }
/* The phone wears the browser's edge and glow, so the pair reads as one set of devices. */
.mk-hero__phone {
  --w: var(--mk-hero-phone-w); grid-area: phone;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pd-neutral-0) 7%, transparent), var(--mk-glow-media);
}
.mk-hero__caption { grid-area: caption; margin-top: 16px; text-align: right; font: var(--pd-type-mk-caption); font-family: var(--mk-font-text); color: var(--pd-text-tertiary); }

/* ------------------------------------------------------------------ 11. Proof row */
.mk-proof { display: grid; grid-template-columns: repeat(4, auto); justify-content: center; margin: 0 auto 56px; }
.mk-proof li {
  display: flex; align-items: center; gap: 10px; padding: 4px 28px;
  font: 500 14px / 20px var(--mk-font-text); color: var(--pd-text-secondary); white-space: nowrap;
}
.mk-proof li + li { border-left: 1px solid var(--pd-border-default); }
.mk-proof .mk-icon { width: 18px; height: 18px; color: var(--pd-brand-600); }

/* ------------------------------------------------------------------ 12. The problem: sources, reader, one chart */
.mk-problem { padding-top: calc(var(--mk-hero-overlap) + var(--mk-seam-gap)); padding-bottom: 96px; }
.mk-flow { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 2fr) minmax(0, 5fr); align-items: center; gap: 24px; }
.mk-flow .mk-sources { width: min(100%, 392px); justify-self: end; }
.mk-flow__wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
.mk-flow__wires path { fill: none; stroke: var(--pd-brand-300); stroke-width: 1.5; stroke-linecap: round; }
.mk-flow__wires .is-dashed { stroke-dasharray: 4 6; }
.mk-flow__wires .is-out { stroke: var(--pd-brand-400); stroke-width: 2; }
.mk-sources { position: relative; z-index: 1; display: grid; gap: 12px; }
.mk-source {
  display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 16px 10px 12px;
  background: var(--pd-bg-surface); border: 1px solid var(--pd-border-default); border-radius: 14px; box-shadow: var(--pd-shadow-1);
}
.mk-source__icon {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 11px;
  background: var(--pd-brand-50); color: var(--pd-brand-600);
}
.mk-source__icon .mk-icon { width: 19px; height: 19px; }
.mk-source--home .mk-source__icon { background: var(--pd-home-tint); color: var(--pd-home-fg); }
.mk-source__title { display: block; font: 600 14px / 20px var(--mk-font-text); color: var(--pd-text-primary); }
.mk-source__meta { display: block; font: 400 13px / 18px var(--mk-font-text); color: var(--pd-text-tertiary); }
.mk-flow__node { position: relative; z-index: 1; display: grid; justify-items: center; gap: 14px; }
.mk-flow__paw {
  display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, var(--pd-brand-950), var(--mk-night) 70%); color: var(--pd-brand-400);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--pd-brand-400) 12%, transparent), 0 16px 32px -12px color-mix(in srgb, var(--pd-brand-600) 55%, transparent);
}
.mk-flow__paw .mk-paw { width: 34px; height: 25px; }
.mk-flow__label { font: var(--pd-type-mk-overline); font-family: var(--mk-font-text); letter-spacing: var(--pd-tracking-overline-mk); text-transform: uppercase; color: var(--pd-brand-600); text-align: center; }

.mk-chart {
  position: relative; z-index: 1; background: var(--pd-bg-surface); border: 1px solid var(--pd-border-default);
  border-radius: 20px; box-shadow: var(--pd-shadow-2); overflow: hidden;
}
.mk-chart__head { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--pd-border-subtle); }
.mk-chart__avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--pd-brand-50); color: var(--pd-brand-600); }
.mk-chart__avatar .mk-icon { width: 20px; height: 20px; }
.mk-chart__who { flex: 1; min-width: 0; }
.mk-chart__name { display: block; font: 600 16px / 22px var(--mk-font-text); color: var(--pd-text-primary); }
.mk-chart__meta { display: block; font: 400 13px / 18px var(--mk-font-text); color: var(--pd-text-tertiary); }
.mk-chart__row { display: grid; gap: 8px; padding: 14px 20px; border-bottom: 1px solid var(--pd-border-subtle); }
.mk-chart__label { font: 500 14px / 20px var(--mk-font-text); color: var(--pd-text-primary); }
.mk-chart__foot { display: flex; align-items: center; gap: 8px; padding: 14px 20px; font: 400 13px / 18px var(--mk-font-text); color: var(--pd-text-tertiary); background: var(--pd-paper); }
.mk-chart__foot .mk-icon { width: 14px; height: 14px; color: var(--pd-brand-600); }
.mk-flow__note { max-width: 44em; margin: 40px auto 0; text-align: center; text-wrap: balance; }

/* ------------------------------------------------------------------ 13. Tour: three chapters, sticky media */
.mk-tour-section { padding-block: var(--mk-section-y); }
.mk-tour-section::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 35% at 78% 45%, color-mix(in srgb, var(--pd-brand-600) 22%, transparent), transparent 70%);
}
.mk-tour { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; }
.mk-tour__stage-col { position: relative; }
.mk-tour__chapters { position: relative; padding-left: 32px; }
.mk-tour__rail { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: var(--mk-night-line-2); }
.mk-tour__progress {
  position: absolute; left: 0; top: 0; width: 2px; height: 0; border-radius: 2px; background: var(--pd-brand-400);
  box-shadow: 0 0 12px color-mix(in srgb, var(--pd-brand-400) 60%, transparent);
  transition: transform var(--mk-dur-3) var(--mk-ease-out), height var(--mk-dur-3) var(--mk-ease-out);
}
.mk-chapter { display: flex; flex-direction: column; justify-content: center; min-height: 40vh; max-width: 460px; padding-block: 32px; }
.mk-chapter__num { font: var(--pd-type-mk-overline); font-family: var(--mk-font-text); letter-spacing: var(--pd-tracking-overline-mk); text-transform: uppercase; color: var(--pd-brand-300); font-variant-numeric: tabular-nums; }
.mk-chapter__title { margin-top: 14px; font: 600 32px / 1.15 var(--mk-font-display); letter-spacing: -0.02em; }
.mk-chapter__body { margin-top: 16px; font: var(--pd-type-mk-lead); font-family: var(--mk-font-text); color: var(--mk-on-night-2); }
.mk-chapter .mk-chips { margin-top: 22px; }
.mk-chapter__media { display: none; margin-top: 28px; }
/* The chapter out of focus dims by color (a text token), never by opacity: it stays above 4.5:1 */
.mk-tour.is-live .mk-chapter :is(.mk-chapter__title, .mk-chapter__body) { transition: color var(--mk-dur-3) var(--pd-ease-standard); }
.mk-tour.is-live .mk-chapter:not(.is-active) :is(.mk-chapter__title, .mk-chapter__body) { color: var(--pd-neutral-500); }
.mk-tour__stage { position: sticky; top: max(104px, calc(50vh - 230px)); }
.mk-tour__layer { position: absolute; inset: 0; opacity: 0; transition: opacity 400ms var(--pd-ease-standard); }
.mk-tour__layer.is-active { opacity: 1; }
.mk-tour__layer picture, .mk-tour__layer img, .mk-tour__layer video { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.mk-tour__caption { margin-top: 18px; text-align: center; color: var(--mk-on-night-3); }
.mk-tour__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 16px; padding-left: 32px; }

/* Silent loop slots: the poster shows until a clip can play; video fades in on canplay */
.mk-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 300ms var(--pd-ease-standard); }
.mk-clip.is-playing { opacity: 1; }

/* ------------------------------------------------------------------ 14. Owners */
.mk-owners__visual { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 1.4fr) minmax(0, 7fr); align-items: center; gap: 0 12px; margin-bottom: 64px; }
.mk-owners__phone { justify-self: center; --w: 248px; }
.mk-bridge { position: relative; display: grid; justify-items: center; gap: 6px; align-self: center; margin-inline: -44px; }
.mk-bridge svg { width: 100%; height: 72px; overflow: visible; }
.mk-bridge__arc { fill: none; stroke: var(--pd-brand-400); stroke-width: 2.5; stroke-dasharray: 0.5 8; stroke-linecap: round; }
.mk-bridge__dot { fill: var(--pd-brand-600); }
.mk-bridge__label { display: inline-flex; align-items: center; gap: 6px; font: 600 13px / 18px var(--mk-font-text); color: var(--pd-brand-600); text-align: center; white-space: nowrap; padding: 4px 10px; border-radius: var(--pd-radius-full); background: var(--pd-brand-50); }
.mk-bridge__label .mk-icon { width: 14px; height: 14px; }
.mk-owners__frame .mk-frame__body { aspect-ratio: 922 / 576; }
.mk-owners__frame img { object-fit: cover; }
.mk-owners__caption { margin-top: 14px; }
.mk-owners__ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 28px; margin-top: 48px; }

/* On the website, today: an intro beside five steps, joined by a dashed line. Teal tiles are the
   owner's own actions (owner-entered data); the last tile is violet, the note that comes from the vet. */
.mk-subhead { font: 600 32px / 1.15 var(--mk-font-display); letter-spacing: -0.02em; text-wrap: balance; color: var(--pd-text-primary); }
.mk-now {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr;
  grid-template-areas: "intro steps" "ctas steps"; column-gap: 72px; max-width: 1120px; margin-inline: auto;
}
.mk-now__intro { grid-area: intro; display: grid; align-content: start; gap: 14px; padding-top: 6px; }
.mk-now__intro .mk-body-lg { font: var(--pd-type-mk-body); font-family: var(--mk-font-text); max-width: 30em; }
.mk-now__ctas { grid-area: ctas; align-self: start; justify-content: flex-start; margin-top: 32px; }
.mk-steps { grid-area: steps; display: grid; }
/* The button again, under the steps, only where the section is one long column (tablet and phone). */
.mk-now__again { display: none; }
.mk-step { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 20px; padding-bottom: 32px; }
.mk-step:last-child { padding-bottom: 0; }
.mk-step:not(:last-child)::before {
  content: ""; position: absolute; left: 19px; top: 48px; bottom: 8px; width: 0;
  border-left: 2px dotted var(--pd-home-300);
}
.mk-step__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--pd-home-tint); color: var(--pd-home-fg); }
.mk-step__icon .mk-icon { width: 20px; height: 20px; }
.mk-step--vet .mk-step__icon { background: var(--pd-brand-50); color: var(--pd-brand-600); }
.mk-step__text { display: grid; gap: 6px; padding-top: 7px; }
.mk-step__title { font: var(--pd-type-mk-title); font-family: var(--mk-font-display); letter-spacing: -0.01em; color: var(--pd-text-primary); text-wrap: balance; }
.mk-step__body { font: var(--pd-type-mk-body); font-family: var(--mk-font-text); color: var(--pd-text-secondary); text-wrap: pretty; max-width: 36em; }

/* In the Pawnda app, coming soon: the home checks that need a phone, and the real captures */
.mk-app { margin-top: 112px; padding-top: 96px; border-top: 1px solid var(--pd-border-default); }
.mk-app__head .mk-lead { max-width: 34em; }
.mk-app .mk-owners__visual { margin-bottom: 0; }
.mk-app__foot { margin-top: 36px; text-align: center; font: var(--pd-type-mk-body); font-family: var(--mk-font-text); color: var(--pd-text-secondary); }
.mk-app__foot .mk-textlink { font-weight: 600; white-space: nowrap; }

/* ------------------------------------------------------------------ 15. Trust */
.mk-group-label { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; color: var(--pd-text-tertiary); }
.mk-group-label::after { content: ""; flex: 1; height: 1px; background: var(--pd-border-default); }
.mk-group-label .mk-overline { color: var(--pd-text-tertiary); }
.mk-cards-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.mk-card {
  display: flex; flex-direction: column; padding: 28px; background: var(--pd-bg-surface);
  border: 1px solid var(--pd-border-default); border-radius: 20px; box-shadow: var(--pd-shadow-1);
}
.mk-card .mk-h3 + p { margin-top: 10px; }
.mk-card__demo { order: -1; margin-bottom: 24px; }
@media (min-width: 1024px) {
  .mk-cards-3 { grid-template-rows: auto auto auto; row-gap: 0; }
  .mk-card { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
  .mk-card .mk-h3 { align-self: end; }
  .mk-card__demo { display: flex; }
  .mk-card__demo .mk-demo { width: 100%; }
}
.mk-demo {
  display: grid; align-content: center; min-height: 196px;
  padding: 18px; border-radius: 14px; background: var(--pd-paper); border: 1px solid var(--pd-border-subtle);
}
.mk-quote {
  position: relative; padding: 2px 0 2px 14px; border-left: 3px solid var(--pd-brand-400);
  font: 400 14px / 22px var(--mk-font-text); color: var(--pd-text-primary);
}
.mk-quote + .mk-chips { margin-top: 12px; }
.mk-demo__row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.mk-demo__value { font: 600 14px / 20px var(--mk-font-text); color: var(--pd-text-primary); margin-right: 4px; }
.mk-demo__arrow { width: 16px; height: 16px; color: var(--pd-text-tertiary); }
.mk-demo__note { margin-top: 10px; font: 400 13px / 18px var(--mk-font-text); color: var(--pd-text-tertiary); }
.mk-bubble { padding: 10px 12px; border-radius: 12px; font: 400 14px / 21px var(--mk-font-text); }
.mk-bubble--q { justify-self: end; max-width: 90%; background: var(--pd-neutral-100); color: var(--pd-text-primary); margin-left: auto; width: fit-content; }
.mk-bubble--a { margin-top: 10px; background: var(--pd-ai-surface); border: 1px solid var(--pd-ai-border); color: var(--pd-text-primary); }
.mk-bubble__who { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font: 600 13px / 18px var(--mk-font-text); letter-spacing: 0.02em; color: var(--pd-brand-700); }
.mk-bubble__who .mk-icon { width: 13px; height: 13px; color: var(--pd-brand-500); }
.mk-trust-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; }
.mk-trust-item { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-content: start; gap: 6px 14px; padding: 24px 0 8px; border-top: 1px solid var(--pd-border-default); }
.mk-trust-item .mk-icon { width: 20px; height: 20px; margin-top: 1px; color: var(--pd-brand-600); }
.mk-trust-item h4 { font: 600 16px / 24px var(--mk-font-text); color: var(--pd-text-primary); }
.mk-trust-item p { grid-column: 2; font: 400 14px / 22px var(--mk-font-text); color: var(--pd-text-secondary); text-wrap: pretty; }
.mk-trust-b { margin-top: 48px; }

/* ------------------------------------------------------------------ 16. Founding clinics: the closing night band */
.mk-founding::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 55% at 85% 60%, color-mix(in srgb, var(--pd-brand-600) 24%, transparent), transparent 70%);
}
.mk-offer { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: center; max-width: 1120px; margin-inline: auto; }
.mk-offer .mk-h2 { margin-top: 14px; }
.mk-offer__copy .mk-lead { margin-top: 20px; }
.mk-offer__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 36px; }
.mk-offer__side {
  padding: 32px; border-radius: 20px;
  background: color-mix(in srgb, var(--pd-text-on-night) 4%, transparent); border: 1px solid var(--mk-night-line-2);
  box-shadow: 0 32px 80px -32px color-mix(in srgb, var(--pd-brand-600) 45%, transparent);
}
/* How vets join: three rows, label and value, then what membership includes */
.mk-offer__side-title { font: var(--pd-type-mk-overline); font-family: var(--mk-font-text); letter-spacing: var(--pd-tracking-overline-mk); text-transform: uppercase; color: var(--pd-brand-300); }
.mk-plans { display: grid; margin: 10px 0 28px; }
.mk-plan { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid var(--mk-night-line-2); }
.mk-plan dt { font: 500 16px / 24px var(--mk-font-text); color: var(--mk-on-night-2); }
.mk-plan dd { display: grid; justify-items: end; margin: 0; text-align: right; font: 600 16px / 24px var(--mk-font-text); color: var(--mk-on-night); font-variant-numeric: tabular-nums; }
.mk-plan__note { font: 400 13px / 18px var(--mk-font-text); color: var(--mk-on-night-3); }
.mk-checklist { display: grid; gap: 16px; }
.mk-checklist li { display: flex; gap: 12px; font: 500 16px / 24px var(--mk-font-text); color: var(--pd-text-on-night); }
.mk-checklist .mk-tick { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: color-mix(in srgb, var(--pd-brand-400) 18%, transparent); color: var(--pd-brand-300); }
.mk-checklist .mk-tick .mk-icon { width: 14px; height: 14px; stroke-width: 2.4; }
.mk-founding__owner { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--mk-night-line); text-align: center; font: var(--pd-type-mk-body-sm); font-family: var(--mk-font-text); color: var(--mk-on-night-3); }
.mk-founding__owner :is(a, button) { background: none; border: 0; padding: 4px 2px; cursor: pointer; text-decoration: none; color: var(--pd-brand-200); font: 600 14px / 20px var(--mk-font-text); border-radius: 6px; }
.mk-founding__owner :is(a, button):hover { color: var(--mk-on-night); text-decoration: underline; text-underline-offset: 3px; }
.mk-founding__owner .mk-icon { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; }

/* The home page's owner line under the founding offer: the question, then a button */
.mk-owner-line {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px;
  margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--mk-night-line);
  font: var(--pd-type-mk-body); font-family: var(--mk-font-text); color: var(--mk-on-night-2);
}

/* Closing band on About */
.mk-close { padding-block: 144px 160px; text-align: center; }
.mk-close::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(45% 38% at 50% 72%, color-mix(in srgb, var(--pd-brand-600) 26%, transparent), transparent 70%);
}
.mk-close__paw { width: 44px; height: 32px; margin: 0 auto 28px; color: var(--pd-brand-400); }
.mk-close .mk-h2 { margin-inline: auto; }
.mk-close .mk-lead { margin: 20px auto 0; }
.mk-close__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 40px; }

/* ------------------------------------------------------------------ 17. Footer */
.mk-footer { background: var(--mk-night-1); color: var(--mk-on-night-3); padding: 72px 0 40px; }
/* When a page ends on a night band, the footer continues that background: one surface, no color step */
.mk:has(main > .mk-night:last-child) .mk-footer { background-color: var(--mk-night); background-image: var(--mk-noise); }
.mk-footer__top { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.mk-footer .mk-brand__glyph { color: var(--pd-brand-400); }
.mk-footer .mk-brand__word { color: var(--mk-on-night); font-size: 22px; }
.mk-footer__tagline { margin-top: 16px; max-width: 24em; font: var(--pd-type-mk-body-sm); font-family: var(--mk-font-text); color: var(--mk-on-night-3); }
.mk-footer__heading { font: var(--pd-type-mk-overline); font-family: var(--mk-font-text); letter-spacing: var(--pd-tracking-overline-mk); text-transform: uppercase; color: var(--mk-on-night-2); }
.mk-footer__links { display: grid; gap: 2px; margin-top: 14px; }
.mk-footer__links a, .mk-footer__links button {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 400 14px / 20px var(--mk-font-text); color: var(--mk-on-night-3); text-decoration: none; border-radius: 6px; width: fit-content;
}
.mk-footer__links a:hover, .mk-footer__links button:hover, .mk-footer__links a[aria-current="page"] { color: var(--mk-on-night); }
.mk-footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--mk-night-line);
}
.mk-footer-copy { font: 400 13px / 20px var(--mk-font-text); color: var(--mk-on-night-3); }
.mk-footer__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; font: 400 13px / 20px var(--mk-font-text); }
.mk-footer__meta a { color: var(--mk-on-night-2); text-decoration: none; }
.mk-footer__meta a:hover { color: var(--mk-on-night); text-decoration: underline; text-underline-offset: 3px; }
.mk .site-version { color: var(--mk-on-night-3); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ 18. Dialogs */
.mk-dialog {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; margin: auto;
  border: 0; border-radius: 24px; background: var(--pd-bg-surface); color: var(--pd-text-primary);
  box-shadow: var(--pd-shadow-3), 0 0 0 1px color-mix(in srgb, var(--pd-brand-950) 6%, transparent); overflow: auto; overscroll-behavior: contain;
}
.mk-dialog::backdrop { background: color-mix(in srgb, var(--pd-bg-night) 56%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.mk-dialog[open] { animation: mk-dialog-in var(--mk-dur-3) var(--mk-ease-out); }
.mk-dialog[open]::backdrop { animation: mk-fade-in var(--mk-dur-2) var(--pd-ease-standard); }
.mk-dialog.is-closing { animation: mk-dialog-out 160ms var(--pd-ease-exit) forwards; }
.mk-dialog.is-closing::backdrop { animation: mk-fade-out 160ms var(--pd-ease-exit) forwards; }
@keyframes mk-dialog-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes mk-dialog-out { to { opacity: 0; transform: translateY(4px) scale(0.99); } }
@keyframes mk-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mk-fade-out { to { opacity: 0; } }
.mk-dialog__head { position: relative; padding: 28px 72px 0 28px; }
.mk-dialog__title { font: var(--pd-type-mk-title); font-family: var(--mk-font-display); letter-spacing: -0.01em; }
.mk-dialog__sub { margin-top: 6px; font: var(--pd-type-mk-body-sm); font-family: var(--mk-font-text); color: var(--pd-text-tertiary); }
.mk-dialog__close {
  position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 44px; height: 44px;
  padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--pd-text-secondary); cursor: pointer;
}
.mk-dialog__close:hover { background: var(--pd-fill-hover); color: var(--pd-text-primary); }
.mk-dialog__close .mk-icon { width: 20px; height: 20px; }
.mk-dialog__body { padding: 24px 28px 28px; }

/* Forms */
.mk-form { display: grid; gap: 18px; }
.mk-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.mk-field { display: grid; gap: 6px; }
.mk-field__label { font: 600 13px / 18px var(--mk-font-text); color: var(--pd-text-secondary); }
.mk-field__label .mk-optional { font-weight: 400; color: var(--pd-text-tertiary); }
.mk-field__error { display: none; align-items: center; gap: 6px; font: 400 13px / 18px var(--mk-font-text); color: var(--pd-danger-text); }
.mk-field__error .mk-icon { width: 14px; height: 14px; }
.mk-field.is-invalid .mk-field__error { display: flex; }
.mk .pd-input { height: 48px; padding: 0 14px; font: 400 16px / 24px var(--mk-font-text); border-radius: 12px; }
.mk textarea.pd-input { height: auto; min-height: 104px; padding: 12px 14px; resize: vertical; }
/* The select caret is drawn with two gradients so its color is a token */
.mk select.pd-input {
  appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--pd-text-tertiary) 50%), linear-gradient(135deg, var(--pd-text-tertiary) 50%, transparent 50%);
  background-position: calc(100% - 21px) 50%, calc(100% - 16px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.mk-form__submit { width: 100%; }
.mk-form__submit[aria-busy="true"] { cursor: progress; }
.mk-form__status:empty { display: none; }
.mk-form__status {
  display: block; padding: 12px 14px; border-radius: 12px; font: 400 14px / 21px var(--mk-font-text); text-wrap: pretty;
  background: var(--pd-warning-tint); border: 1px solid var(--pd-warning-border); color: var(--pd-warning-text);
}
.mk-form__status.is-error { background: var(--pd-danger-tint); border-color: var(--pd-danger-border); color: var(--pd-danger-text); }
.mk-form__status a { color: inherit; font-weight: 600; }
.mk-form__fine { font: 400 13px / 18px var(--mk-font-text); color: var(--pd-text-tertiary); text-align: center; text-wrap: balance; }
.mk-form__fine a { color: var(--pd-text-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.mk-form__fine + .mk-form__fine { margin-top: -10px; }
.mk-success { display: grid; justify-items: center; gap: 12px; padding: 12px 0 4px; text-align: center; }
.mk-success__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--pd-brand-50); color: var(--pd-brand-600); }
.mk-success__icon .mk-icon { width: 26px; height: 26px; stroke-width: 2.2; }
.mk-success .pd-btn { margin-top: 8px; min-width: 140px; }
.mk-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Film dialog */
.mk-film {
  width: min(1200px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; margin: auto; border: 0;
  border-radius: 20px; background: var(--mk-night); color: var(--mk-on-night-2); overflow: auto;
  box-shadow: 0 40px 120px -30px color-mix(in srgb, var(--pd-neutral-950) 80%, transparent), 0 0 0 1px var(--mk-night-line);
}
.mk-film::backdrop { background: color-mix(in srgb, var(--pd-bg-night) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.mk-film[open] { animation: mk-dialog-in var(--mk-dur-3) var(--mk-ease-out); }
.mk-film[open]::backdrop { animation: mk-fade-in var(--mk-dur-2) var(--pd-ease-standard); }
.mk-film.is-closing { animation: mk-dialog-out 160ms var(--pd-ease-exit) forwards; }
.mk-film.is-closing::backdrop { animation: mk-fade-out 160ms var(--pd-ease-exit) forwards; }
.mk-film__player { position: relative; aspect-ratio: 16 / 9; background: var(--pd-neutral-950); }
.mk-film__video { width: 100%; height: 100%; object-fit: contain; background: var(--pd-neutral-950); }
.mk-film__start {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 0; border: 0; cursor: pointer;
  background: color-mix(in srgb, var(--pd-bg-night) 18%, transparent); color: var(--mk-on-night);
}
.mk-film__start[hidden] { display: none; }
.mk-film__start span {
  display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 26px 0 20px; border-radius: var(--pd-radius-full);
  background: var(--pd-brand-600); font: 600 16px / 20px var(--mk-font-text);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--pd-neutral-0) 20%, transparent), 0 12px 32px -8px color-mix(in srgb, var(--pd-brand-400) 70%, transparent);
  transition: transform var(--mk-dur-2) var(--mk-ease-out), background-color var(--mk-dur-1) var(--pd-ease-standard);
}
.mk-film__start:hover span { background: var(--pd-brand-700); transform: scale(1.03); }
.mk-film__start .mk-icon { width: 20px; height: 20px; }
.mk-film__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px 14px 24px; border-top: 1px solid var(--mk-night-line); }
.mk-film__title { font: 600 14px / 20px var(--mk-font-text); color: var(--mk-on-night); }
.mk-film__title span { font-weight: 400; color: var(--mk-on-night-3); }
.mk-film__note { margin-top: 2px; font: 400 13px / 18px var(--mk-font-text); color: var(--mk-on-night-2); }
.mk-film__close {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border: 1px solid var(--mk-night-line-2);
  border-radius: var(--pd-radius-full); background: transparent; color: var(--mk-on-night-2); cursor: pointer; font: 600 14px / 20px var(--mk-font-text);
}
.mk-film__close:hover { background: color-mix(in srgb, var(--pd-text-on-night) 8%, transparent); color: var(--mk-on-night); }
.mk-film__close .mk-icon { width: 18px; height: 18px; }
.mk-film__transcript { padding: 0 24px 22px; }
.mk-film__transcript summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none;
  font: 600 14px / 20px var(--mk-font-text); color: var(--pd-brand-300); border-radius: 8px;
}
.mk-film__transcript summary::-webkit-details-marker { display: none; }
.mk-film__transcript summary .mk-icon { width: 16px; height: 16px; transition: transform var(--mk-dur-2) var(--mk-ease-out); }
.mk-film__transcript[open] summary .mk-icon { transform: rotate(90deg); }
.mk-film__transcript ol { display: grid; gap: 10px; margin-top: 8px; padding-left: 0; max-width: 62em; }
.mk-film__transcript li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; font: 400 14px / 22px var(--mk-font-text); color: var(--mk-on-night-2); }
.mk-film__transcript time { color: var(--mk-on-night-3); font-variant-numeric: tabular-nums; }
.mk-film__transcript em { font-style: normal; color: var(--mk-on-night-3); }
html.mk-modal-open { overflow: hidden; }

/* ------------------------------------------------------------------ 19. Secondary pages */
.mk-page-hero { padding-top: calc(var(--mk-nav-h) + 104px); padding-bottom: 96px; }
.mk-page-hero__icon { width: 120px; height: 120px; border-radius: 28px; box-shadow: var(--mk-shadow-media); }
.mk-page-hero .mk-h1 { margin-top: 36px; max-width: 14em; }
.mk-page-hero .mk-lead { margin-top: 24px; }
.mk-page-hero--center { text-align: center; }
.mk-page-hero--center .mk-page-hero__icon, .mk-page-hero--center .mk-h1, .mk-page-hero--center .mk-lead { margin-inline: auto; }
.mk-beliefs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.mk-belief { padding: 32px; background: var(--pd-bg-surface); border: 1px solid var(--pd-border-default); border-radius: 20px; box-shadow: var(--pd-shadow-1); }
.mk-belief__num { font: var(--pd-type-mk-overline); font-family: var(--mk-font-text); letter-spacing: var(--pd-tracking-overline-mk); color: var(--pd-brand-600); font-variant-numeric: tabular-nums; }
.mk-belief .mk-h3 { margin-top: 14px; }
.mk-belief p { margin-top: 8px; }
.mk-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.mk-panel { padding: 32px; border-radius: 20px; background: var(--pd-bg-surface); border: 1px solid var(--pd-border-default); }
.mk-panel .mk-overline { display: block; margin-bottom: 12px; }
.mk-panel p + p { margin-top: 12px; }
.mk-contact-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding: 32px; border-radius: 20px; background: var(--pd-bg-surface); border: 1px solid var(--pd-border-default); box-shadow: var(--pd-shadow-1); }
.mk-contact-card__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.mk-contact-card--below { margin-top: 20px; }
.mk-contact-card__text { margin-top: 6px; }
.mk-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.mk-principles .mk-belief { padding: 28px; }
.mk-section--after-hero { padding-top: 0; }

.mk-404 { display: grid; place-items: center; min-height: 100svh; padding: calc(var(--mk-nav-h) + 72px) 0 96px; text-align: center; }
.mk-404__icon { width: 96px; height: 96px; margin: 0 auto; border-radius: 24px; box-shadow: 0 20px 48px -16px color-mix(in srgb, var(--pd-neutral-950) 60%, transparent), 0 0 0 1px var(--mk-night-line); }
.mk-404 .mk-overline { margin-top: 32px; }
.mk-404 .mk-h1 { margin: 14px auto 0; max-width: 12em; }
.mk-404 .mk-lead { margin: 20px auto 0; }
.mk-404__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.mk-404__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin-top: 40px; }

/* Legal and long-form prose (privacy, terms, credits) */
.mk-legal { width: min(100% - 2 * var(--mk-gutter), 720px); margin-inline: auto; padding: calc(var(--mk-nav-h) + 72px) 0 112px; }
.mk-legal h1 { font: var(--pd-type-mk-display-2); font-family: var(--mk-font-display); letter-spacing: -0.02em; color: var(--pd-text-primary); }
/* The DRAFT line: an amber callout, glyph plus words (the glyph is a token-colored mask) */
.mk-legal-meta {
  position: relative; margin-top: 20px; padding: 12px 16px 12px 44px; border-radius: 12px;
  border: 1px solid var(--pd-warning-border); background: var(--pd-warning-tint);
  font: 400 14px / 21px var(--mk-font-text); color: var(--pd-warning-text); text-wrap: pretty;
}
.mk-legal-meta::before {
  content: ""; position: absolute; left: 16px; top: 13px; width: 18px; height: 18px; background: var(--pd-warning-fg);
  -webkit-mask: var(--mk-mask-alert) center / contain no-repeat; mask: var(--mk-mask-alert) center / contain no-repeat;
}
.mk-legal-lead { margin-top: 20px; font: var(--pd-type-mk-lead); font-family: var(--mk-font-text); color: var(--pd-text-secondary); }
.mk-legal-section { margin-top: 44px; }
.mk-legal-section h2 { font: 600 20px / 28px var(--mk-font-text); letter-spacing: -0.01em; color: var(--pd-text-primary); }
.mk-legal-section p, .mk-legal-section li { font: 400 16px / 27px var(--mk-font-text); color: var(--pd-text-secondary); }
.mk-legal-section h2 + p, .mk-legal-section h2 + ul { margin-top: 12px; }
.mk-legal-section p + p, .mk-legal-section p + ul, .mk-legal-section ul + p { margin-top: 14px; }
.mk-legal-section ul { list-style: disc; padding-left: 22px; }
.mk-legal-section li + li { margin-top: 8px; }
.mk-legal strong { color: var(--pd-text-primary); font-weight: 600; }
.mk-legal a { color: var(--pd-text-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.mk-legal a:hover { color: var(--pd-text-link-hover); text-decoration-color: currentColor; }

/* Image credits */
.mk-credits__pet span { font-weight: 400; color: var(--pd-text-tertiary); }
.mk-legal-section .mk-credits { display: grid; gap: 10px; margin-top: 14px; padding-left: 0; list-style: none; }
.mk-legal-section .mk-credit { margin: 0; padding: 14px 18px; border-radius: 14px; background: var(--pd-bg-surface); border: 1px solid var(--pd-border-default); }
.mk-legal-section .mk-credit__what { font: 600 16px / 24px var(--mk-font-text); color: var(--pd-text-primary); }
.mk-legal-section .mk-credit__meta { margin-top: 2px; font: 400 14px / 22px var(--mk-font-text); color: var(--pd-text-secondary); overflow-wrap: anywhere; }

/* Legal pages: a sticky "On this page" list beside the text at wide widths (built by marketing.js) */
.mk-legal-shell { flex: 1 0 auto; }
.mk-toc { display: none; }
@media (min-width: 1180px) {
  .mk-legal-shell { display: grid; grid-template-columns: 232px minmax(0, 720px); column-gap: 72px; justify-content: center; }
  .mk-legal-shell .mk-legal { width: 100%; margin: 0; }
  .mk-toc {
    display: block; position: sticky; top: calc(var(--mk-nav-h) + 32px); align-self: start;
    margin-top: calc(var(--mk-nav-h) + 80px); max-height: calc(100vh - var(--mk-nav-h) - 64px);
    overflow-y: auto; overscroll-behavior: contain; padding-bottom: 24px;
  }
}
.mk-toc__title { margin-bottom: 12px; font: var(--pd-type-mk-overline); font-family: var(--mk-font-text); letter-spacing: var(--pd-tracking-overline-mk); text-transform: uppercase; color: var(--pd-text-tertiary); }
.mk-toc__list { display: grid; gap: 2px; border-left: 1px solid var(--pd-border-default); }
.mk-toc__list a {
  display: block; margin-left: -1px; padding: 6px 12px; border-left: 2px solid transparent; border-radius: 0 8px 8px 0;
  font: 400 14px / 20px var(--mk-font-text); color: var(--pd-text-secondary); text-decoration: none;
  transition: color var(--mk-dur-1) var(--pd-ease-standard), border-color var(--mk-dur-2) var(--pd-ease-standard), background-color var(--mk-dur-1) var(--pd-ease-standard);
}
.mk-toc__list a:hover { color: var(--pd-text-primary); background: var(--pd-fill-hover); }
.mk-toc__list a[aria-current="true"] { color: var(--pd-brand-700); border-left-color: var(--pd-brand-600); font-weight: 500; }

/* ------------------------------------------------------------------ 20. Motion (only with JS and without reduced motion)
   Entrances fill backwards only: each end frame equals the resting style, so nothing stays held by an animation. */
.mk-motion [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity var(--mk-dur-4) var(--mk-ease-out), transform var(--mk-dur-4) var(--mk-ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
.mk-motion [data-reveal].is-in { opacity: 1; transform: none; }
.mk-motion .mk-enter { animation: mk-rise var(--mk-dur-4) var(--mk-ease-out) backwards; animation-delay: calc(var(--i, 0) * 70ms + 60ms); }
.mk-motion .mk-hero__stage.mk-enter { animation: mk-stage var(--mk-dur-5) var(--mk-ease-out) backwards; animation-delay: 200ms; }
.mk-motion .mk-hero__phone { animation: mk-phone var(--mk-dur-5) var(--mk-ease-out) backwards; animation-delay: 320ms; }
.mk-motion.mk-no-enter .mk-enter, .mk-motion.mk-no-enter .mk-hero__phone { animation: none; }
@keyframes mk-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes mk-stage { from { transform: translateY(24px) scale(0.985); } to { transform: none; } }
@keyframes mk-phone { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Sources to chart: tiles nudge in, wires appear, the reader pulses, rows rise, chips pop */
.mk-motion .mk-flow .mk-source { opacity: 0; transform: translateX(-8px); transition: opacity 480ms var(--mk-ease-out), transform 480ms var(--mk-ease-out); transition-delay: calc(var(--i, 0) * 40ms); }
.mk-motion .mk-flow .mk-flow__wires path { opacity: 0; transition: opacity 600ms var(--mk-ease-in-out); transition-delay: calc(220ms + var(--i, 0) * 40ms); }
.mk-motion .mk-flow .mk-flow__paw { transform: scale(0.94); opacity: 0; transition: transform 480ms var(--mk-ease-out) 300ms, opacity 300ms var(--pd-ease-standard) 300ms; }
.mk-motion .mk-flow .mk-chart__row { opacity: 0; transform: translateY(6px); transition: opacity 420ms var(--mk-ease-out), transform 420ms var(--mk-ease-out); transition-delay: calc(560ms + var(--i, 0) * 80ms); }
.mk-motion .mk-flow .mk-chart__row .mk-chip { transform: scale(0.96); opacity: 0; transition: transform 200ms var(--mk-ease-out), opacity 200ms var(--pd-ease-standard); transition-delay: calc(760ms + var(--i, 0) * 80ms); }
.mk-motion .mk-flow.is-in .mk-source,
.mk-motion .mk-flow.is-in .mk-chart__row,
.mk-motion .mk-flow.is-in .mk-chart__row .mk-chip { opacity: 1; transform: none; }
.mk-motion .mk-flow.is-in .mk-flow__wires path { opacity: 1; }
.mk-motion .mk-flow.is-in .mk-flow__paw { opacity: 1; transform: scale(1); animation: mk-pulse 480ms var(--mk-ease-out) 620ms 1; }
@keyframes mk-pulse { 50% { transform: scale(1.06); } }

/* Mobile menu sheet: slides down 16px and fades, links follow 30ms apart */
.mk-menu[open] { animation: mk-menu-in var(--mk-dur-3) var(--mk-ease-out); }
.mk-menu[open]::backdrop { animation: mk-fade-in var(--mk-dur-2) var(--pd-ease-standard); }
.mk-menu[open] .mk-menu__links a { animation: mk-rise var(--mk-dur-3) var(--mk-ease-out) backwards; }
.mk-menu[open] .mk-menu__links a:nth-child(2) { animation-delay: 30ms; }
.mk-menu[open] .mk-menu__links a:nth-child(3) { animation-delay: 60ms; }
.mk-menu[open] .mk-menu__links a:nth-child(4) { animation-delay: 90ms; }
.mk-menu.is-closing { animation: mk-menu-out 160ms var(--pd-ease-exit) forwards; }
.mk-menu.is-closing::backdrop { animation: mk-fade-out 160ms var(--pd-ease-exit) forwards; }
@keyframes mk-menu-in { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
@keyframes mk-menu-out { to { opacity: 0; transform: translateY(-8px); } }

/* Content already on screen at load shows at once, without a reveal */
.mk-instant, .mk-instant * { transition: none !important; }

/* ------------------------------------------------------------------ 21. Responsive */
@media (max-width: 1199px) {
  .mk-nav__inner { gap: 16px; }
  .mk-hero__comp { --mk-hero-phone-w: 216px; }
  .mk-proof li { padding-inline: 20px; }
  .mk-tour { gap: 48px; }
  .mk-chapter__title { font-size: 28px; }
  .mk-now { column-gap: 56px; }
  .mk-trust-list { gap: 0 24px; }
  .mk-offer { gap: 48px; }
}

@media (max-width: 1023px) {
  .mk { --mk-section-y: 96px; --mk-head-gap: 48px; --mk-hero-overlap: 140px; --mk-seam-gap: 64px; }
  /* The bar keeps the brand, the two sign-up buttons and the menu; the links and Sign in are in the menu. */
  .mk-nav__links, .mk-nav__signin { display: none; }
  .mk-nav__actions { margin-left: auto; }
  .mk-nav__menu-btn { display: grid; }
  /* Tablet hero: the Pawnda pane at readable size, the phone beside it */
  .mk-hero__comp { --mk-hero-phone-w: 190px; width: min(100%, 640px); margin-inline: auto; }
  .mk-hero__frame .mk-frame__body { aspect-ratio: 4 / 5; }
  .mk-proof { grid-template-columns: repeat(2, auto); gap: 12px 0; margin-bottom: 48px; }
  .mk-proof li:nth-child(3) { border-left: 0; }
  .mk-problem { padding-bottom: 88px; }
  .mk-flow { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .mk-flow__wires { display: none; }
  .mk-sources, .mk-flow .mk-sources { grid-template-columns: repeat(2, minmax(0, 1fr)); width: auto; justify-self: stretch; }
  .mk-flow__node { grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin: 28px 0; justify-items: stretch; }
  .mk-flow__node::before, .mk-flow__node::after { content: ""; height: 1px; background: linear-gradient(90deg, transparent, var(--pd-brand-300)); }
  .mk-flow__node::after { background: linear-gradient(90deg, var(--pd-brand-300), transparent); }
  .mk-flow__paw { width: 56px; height: 56px; }
  .mk-flow__paw .mk-paw { width: 26px; height: 19px; }
  .mk-flow__label { grid-column: 1 / -1; grid-row: 2; }
  .mk-tour-section { padding-block: 96px; }
  .mk-tour { grid-template-columns: minmax(0, 1fr); }
  .mk-tour__stage-col { display: none; }
  .mk-tour__chapters { padding-left: 0; }
  .mk-tour__rail, .mk-tour__progress { display: none; }
  .mk-chapter { min-height: 0; max-width: none; padding-block: 0; }
  .mk-chapter + .mk-chapter { margin-top: 72px; }
  .mk-chapter__media { display: block; }
  .mk-tour.is-live .mk-chapter:not(.is-active) :is(.mk-chapter__title, .mk-chapter__body) { color: inherit; }
  .mk-tour.is-live .mk-chapter:not(.is-active) .mk-chapter__body { color: var(--mk-on-night-2); }
  .mk-tour.is-live .mk-chapter:not(.is-active) .mk-chapter__title { color: var(--mk-on-night); }
  .mk-tour__cta { padding-left: 0; margin-top: 48px; }
  .mk-owners__visual { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 0; margin-bottom: 64px; }
  .mk-owners__phone { --w: 250px; }
  .mk-bridge { width: 100%; max-width: 240px; margin: 24px 0 20px; gap: 12px; }
  .mk-bridge > svg { display: none; }
  .mk-bridge::after { content: ""; width: 0; height: 44px; border-left: 2px dotted var(--pd-brand-400); }
  .mk-owners__frame-wrap { width: 100%; }
  /* Tablet and phone: the intro, then the button, then the steps, in one column. The button is on
     the first screen of the section, and comes once more under the last step. */
  .mk-now { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "intro" "ctas" "steps" "again"; max-width: 680px; }
  .mk-now__intro { padding-top: 0; }
  .mk-now__ctas { margin-top: 28px; }
  .mk-steps { margin-top: 48px; }
  .mk-now__again { display: block; grid-area: again; margin-top: 40px; }
  .mk-app { margin-top: 96px; padding-top: 80px; }
  /* Tablet trust: the three demos stay in one row */
  /* Trust demos: one swipe row with scroll-snap and a peek of the next card. Every card stays
     in the accessibility tree; marketing.js makes the cards focusable and adds the keys. */
  .mk-cards-3[data-swipe] {
    display: flex; align-items: stretch; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--mk-gutter);
    margin-inline: calc(-1 * var(--mk-gutter)); padding: 4px var(--mk-gutter) 12px;
    scrollbar-width: none;
  }
  .mk-cards-3[data-swipe]::-webkit-scrollbar { display: none; }
  .mk-cards-3[data-swipe] > .mk-card { flex: 0 0 clamp(330px, 42%, 360px); padding: 20px; scroll-snap-align: start; }
  .mk-cards-3[data-swipe] .mk-card__demo { flex: none; margin-bottom: 20px; }
  .mk-demo { min-height: 0; padding: 14px; }
  /* Cards in the row skip the per-card reveal, so a card swiped into view never waits on one */
  .mk-motion .mk-cards-3[data-swipe] > [data-reveal] { opacity: 1; transform: none; }
  .mk-trust-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
  .mk-offer { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .mk-footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mk-footer__brand { grid-column: 1 / -1; }
  .mk-principles { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .mk { --mk-nav-h: 56px; --mk-section-y: 64px; --mk-head-gap: 32px; --mk-hero-overlap: 96px; --mk-seam-gap: 48px; }
  .mk-lead, .mk-legal-lead, .mk-body-lg, .mk-chapter__body { font-size: 17px; line-height: 27px; }
  .mk-footer .mk-brand__word { font-size: 20px; }
  .mk-chapter .mk-chips { display: none; }
  .mk-h3 { font-size: 20px; line-height: 26px; }
  .mk-chapter__title { font-size: 24px; line-height: 1.2; }
  .mk-nav .pd-btn { height: 36px; padding: 0 14px; position: relative; }
  .mk-nav .pd-btn::after { content: ""; position: absolute; inset: -4px; }
  .mk-hero { padding-top: calc(var(--mk-nav-h) + 40px); }
  .mk-hero__title { margin-top: 20px; }
  .mk-hero__lead { margin-top: 18px; }
  .mk-hero__ctas { flex-direction: column; align-items: stretch; width: 100%; gap: 20px; margin-top: 28px; }
  .mk-audience { justify-items: stretch; gap: 8px; }
  .mk-hero__ctas .pd-btn { width: 100%; }
  .mk-hero__micro { margin: 4px 0 -12px; }
  .mk-hero__film { min-height: 44px; }
  .mk-hero__stage { margin-top: 40px; }
  .mk-hero__frame .mk-frame__bar { height: 32px; padding: 0 12px; }
  .mk-hero__frame .mk-frame__dots i { width: 8px; height: 8px; }
  .mk-hero__frame .mk-frame__url { display: none; }
  .mk-hero__comp { width: 100%; grid-template-columns: minmax(0, 1fr); grid-template-areas: "frame" "caption"; }
  .mk-hero__phone { display: none; }
  .mk-hero__caption { text-align: left; }
  .mk-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; margin-bottom: 40px; }
  .mk-proof li { padding: 0; border-left: 0 !important; white-space: normal; align-items: flex-start; }
  .mk-proof .mk-icon { margin-top: 1px; }
  .mk-problem { padding-bottom: var(--mk-section-y); }
  .mk-sources { gap: 10px; }
  .mk-source { min-height: 56px; padding: 8px 10px; gap: 10px; }
  .mk-source__icon { width: 34px; height: 34px; border-radius: 10px; }
  .mk-source__icon .mk-icon { width: 17px; height: 17px; }
  .mk-source__meta { display: none; }
  .mk-chart__row { padding: 14px 16px; }
  .mk-chart__head, .mk-chart__foot { padding-inline: 16px; }
  .mk-tour-section { padding-block: 80px; }
  .mk-chapter + .mk-chapter { margin-top: 56px; }
  .mk-tour__cta { margin-top: 40px; }
  .mk-tour__cta .pd-btn { width: 100%; }
  .mk-owners__visual { margin-bottom: 48px; }
  .mk-owners__phone { --w: 208px; }
  .mk-subhead { font-size: 24px; line-height: 1.2; }
  .mk-now__intro { gap: 12px; }
  .mk-step { grid-template-columns: 36px minmax(0, 1fr); gap: 0 14px; padding-bottom: 28px; }
  .mk-step:not(:last-child)::before { left: 17px; top: 44px; }
  .mk-step__icon { width: 36px; height: 36px; border-radius: 11px; }
  .mk-step__icon .mk-icon { width: 18px; height: 18px; }
  .mk-step__text { padding-top: 5px; }
  .mk-step__title { font-size: 20px; line-height: 26px; }
  .mk-steps { margin-top: 40px; }
  .mk-now__again { margin-top: 32px; }
  .mk-now__again .pd-btn { width: 100%; }
  .mk-app { margin-top: 64px; padding-top: 64px; }
  .mk-app__foot { margin-top: 28px; }
  .mk-owners__ctas { flex-direction: column; align-items: stretch; margin-top: 24px; }
  .mk-owners__ctas .pd-btn { width: 100%; }
  .mk-owners__ctas .mk-link { justify-content: center; }
  .mk-chapter__media--tablet-up { display: none; }
  .mk-cards-3[data-swipe] > .mk-card { flex-basis: max(312px, min(84%, 320px)); padding: 16px; }
  .mk-cards-3[data-swipe] .mk-demo { padding: 12px; }
  .mk-cards-3:not([data-swipe]) { grid-template-columns: minmax(0, 1fr); }
  .mk-trust-list { grid-template-columns: minmax(0, 1fr); }
  .mk-trust-item { padding: 20px 0 12px; }
  .mk-trust-b { margin-top: 40px; }
  /* One column on a phone: every row starts at the left edge, and the button spans the width */
  .mk-offer { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .mk-offer__copy { display: contents; }
  .mk-offer__side { order: 2; margin-top: 28px; padding: 22px; }
  .mk-offer__ctas { order: 3; margin-top: 28px; flex-direction: column; align-items: stretch; }
  .mk-offer__ctas .pd-btn { width: 100%; }
  .mk-offer__ctas .mk-link { justify-content: center; }
  .mk-founding__owner { margin-top: 40px; }
  .mk-owner-line { flex-direction: column; margin-top: 40px; }
  .mk-owner-line .pd-btn { width: 100%; height: 48px; font-size: 16px; }
  .mk-close { padding-block: 96px 80px; }
  .mk-close__ctas { flex-direction: column; align-items: stretch; }
  .mk-close__ctas .pd-btn { width: 100%; }
  .mk-footer { padding-top: 56px; }
  .mk-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .mk-footer__col--legal { grid-column: 1 / -1; }
  .mk-footer__bottom { flex-direction: column; align-items: flex-start; margin-top: 40px; }
  .mk-dialog__head { padding: 24px 64px 0 22px; }
  .mk-dialog__body { padding: 20px 22px 24px; }
  .mk-form__row { grid-template-columns: minmax(0, 1fr); }
  .mk-film { width: 100vw; max-width: 100vw; max-height: 100dvh; border-radius: 0; }
  .mk-film[open] { display: flex; flex-direction: column; justify-content: center; height: 100dvh; }
  .mk-film__transcript ol { max-height: 36vh; overflow: auto; }
  .mk-film__start span { height: 48px; padding: 0 20px 0 16px; font-size: 16px; }
  .mk-film__bar { padding-left: 16px; }
  .mk-page-hero { padding-top: calc(var(--mk-nav-h) + 56px); padding-bottom: 64px; }
  .mk-page-hero__icon { width: 96px; height: 96px; border-radius: 22px; }
  .mk-beliefs, .mk-split { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .mk-belief, .mk-panel, .mk-contact-card { padding: 24px; }
  .mk-contact-card__actions { width: 100%; }
  .mk-contact-card__actions .pd-btn { flex: 1 1 100%; }
  .mk-404__ctas { flex-direction: column; align-items: stretch; width: min(100%, 360px); margin-inline: auto; }
}

/* A phone's bar has room for one button: the owner button leaves it (the menu sheet and the hero carry it). */
@media (max-width: 559px) {
  .mk-nav__owner { display: none; }
}

/* The pill stays on the first screen of a 375 to 399 px phone: the arrow goes, the words stay */
@media (max-width: 399px) {
  .mk-pill { gap: 8px; }
  .mk-pill > .mk-icon { display: none; }
}
@media (max-width: 369px) {
  .mk-hero__pill-wrap { display: none; }
}

/* ------------------------------------------------------------------ 22. Reduced motion: opacity only, short, no travel */
@media (prefers-reduced-motion: reduce) {
  html:has(body.mk) { scroll-behavior: auto; }
  .mk *, .mk *::before, .mk *::after { transition-duration: 120ms !important; animation: none !important; }
  .mk-motion [data-reveal], .mk-motion .mk-flow .mk-source, .mk-motion .mk-flow .mk-chart__row, .mk-motion .mk-flow .mk-chart__row .mk-chip, .mk-motion .mk-flow .mk-flow__paw {
    opacity: 1 !important; transform: none !important; transition-delay: 0ms !important;
  }
  .mk-motion .mk-flow .mk-flow__wires path { opacity: 1 !important; }
  .mk-bridge__dot { display: none; }
  .mk .pd-btn:active, .mk .pd-btn:hover .mk-arrow, .mk-link:hover .mk-arrow { transform: none !important; }
}

@media print {
  .mk-nav, .mk-footer, .mk-dialog, .mk-film, .mk-menu, .mk-hero__stage, .mk-tour__stage-col, .mk-toc { display: none !important; }
  .mk-legal { padding-top: 0; }
  .mk-legal a { color: inherit; }
  .mk-night { background: var(--pd-neutral-0) !important; color: var(--pd-text-primary) !important; }
  .mk-night :is(h1, h2, h3) { color: var(--pd-text-primary) !important; }
}