/* ============================================================
   DESIGN SYSTEM v2, PuppyReports™ Premium
   Warm cream + Navy/Gold authority + Editorial typography
============================================================ */
:root {
  --navy: #0d1b2a;
  --navy-light: #1b2838;
  --navy-mid: #253649;
  /* CEO 2026-06-23: "rich deep navy" carried sitewide from the member-dashboard sidebar.
     Subtle gold + purple radial depth over a deepened midnight gradient. Backgrounds only. */
  --navy-rich:
    radial-gradient(circle at 20% 8%, rgba(214,180,90,0.10) 0%, transparent 28%),
    radial-gradient(circle at 96% 42%, rgba(181,108,255,0.08) 0%, transparent 34%),
    linear-gradient(180deg, #07111F 0%, #050C17 48%, #030812 100%);
  --navy-rich-base: #07111f;
  --gold: #d9b76a;
  --gold-light: #e8c547;
  --gold-dark: #a67c1a;
  --gold-soft: #F0E6C8;
  /* CEO 2026-06-21: canonical premium GLOSSY metallic gold for ALL gold buttons/CTAs/pills sitewide. */
  --pr-gold-gloss: linear-gradient(180deg, #f9eec2 0%, #e8cf86 26%, #d2ac56 54%, #b9933a 80%, #9c7c2e 100%);
  --pr-gold-gloss-shadow: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(120,85,20,0.5), 0 2px 7px rgba(0,0,0,0.22);
  --blue: #3182CE;
  --blue-light: #63B3ED;
  --green: #059669;
  --red: #DC2626;
  --white: #FFFFFF;
  --cream: #FAF7F2;
  --cream-dark: #F3EDE3;
  --warm-white: #FEFCF8;
  --gray-50: #F8F6F3;
  --gray-100: #EDE9E3;
  --gray-200: #DDD8D0;
  --gray-300: #C5BFB5;
  --gray-400: #A09889;
  --gray-500: #7A7264;
  --gray-600: #5A5349;
  --gray-700: #3D3731;
  --gray-800: #1A1815;
  --font-display: 'DM Serif Display', 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --shadow-sm: 0 1px 3px rgba(13,27,42,0.06), 0 1px 2px rgba(13,27,42,0.04);
  --shadow-md: 0 4px 14px rgba(13,27,42,0.08);
  --shadow-lg: 0 10px 30px rgba(13,27,42,0.1), 0 4px 8px rgba(13,27,42,0.04);
  --shadow-xl: 0 20px 50px rgba(13,27,42,0.12), 0 8px 16px rgba(13,27,42,0.06);
  --shadow-gold: 0 4px 20px rgba(200,168,78,0.2);
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 40px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--gray-800);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.15; color: var(--navy); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; border: none; background: none; font-family: var(--font-body); }

/* ============================================================
   SCROLL ANIMATIONS, Intersection Observer driven
============================================================ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.25,0.46,0.45,0.94), transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-32px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(32px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal-right.visible { opacity: 1; transform: translateX(0); }
.stagger > *:nth-child(1) { transition-delay: 0s; }
.stagger > *:nth-child(2) { transition-delay: 0.1s; }
.stagger > *:nth-child(3) { transition-delay: 0.15s; }
.stagger > *:nth-child(4) { transition-delay: 0.2s; }
.stagger > *:nth-child(5) { transition-delay: 0.25s; }
.stagger > *:nth-child(6) { transition-delay: 0.3s; }

/* ============================================================
   SITE NAV, Refined with better spacing
============================================================ */
.site-nav {
  background: var(--navy-rich);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05);
}
.site-nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  height: 68px;
  gap: 12px;
}
.site-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-right: 20px;
  text-decoration: none;
}
.site-nav-brand img {
  /* CEO 2026-06-22 Image #116: corner logo is now the official dog-SHIELD icon (square art with its
     own black bg + pink glow). Show it WHOLE (object-fit:contain, no circular crop that clipped the
     shield points); the black bg blends into the dark nav. */
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: contain;
}
.site-nav-brand-text {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.3px;
  /* CEO 2026-06-05 Image #105: jewelry gold with WHITE highlights (less flat-yellow) + a slow gleam sweep (twinkle). */
  color: #ead79a; /* fallback */
  background: linear-gradient(110deg, #fbf3d4 0%, #e3c277 20%, #fff7e0 40%, #d9b25c 58%, #f6e9b4 78%, #e3c277 100%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: navGoldGleam 7s linear infinite;
}
@keyframes navGoldGleam { to { background-position: 220% center; } }
@media (prefers-reduced-motion: reduce) { .site-nav-brand-text { animation: none; } }
.site-nav-brand-text span { -webkit-text-fill-color: #d9b25c; color: #d9b25c; }
.site-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Site-wide mini search bar in the nav header (CEO 2026-05-14)
, same /search?q= endpoint as the footer search, always reachable
   from any page. Compact pill on desktop (180px), expands to full
   width inside the mobile hamburger menu. */
.site-nav-search {
  display: flex;
  align-items: center;
  gap: 5px;
  /* CEO 2026-07-22: widen so the full placeholder + SEARCH button fit without clipping
     ("Search breeders, rescues, breeds…" was truncating). Focus-expands further. */
  width: 340px;
  height: 34px;
  padding: 0 4px 0 10px;
  margin: 0 6px 0 0;
  background: #ffffff;
  border: 1.5px solid rgba(200,168,78,0.70);
  border-radius: 100px;
  transition: all 0.18s ease;
  flex-shrink: 0;
  /* CEO 2026-06-21 (GLOSSY-GOLD-STANDARD): always-on subtle pink/purple social
     glow on the sitewide nav search — identical treatment to the dashboard
     (.md-search). Always on (not just hover/focus); field stays white/readable. */
  box-shadow: 0 0 0 1px rgba(190,120,230,.35), 0 0 14px rgba(170,90,225,.28);
}
.site-nav-search:focus-within {
  background: #ffffff;
  border-color: rgba(232,184,75,0.65);
  /* Keep the always-on pink/purple glow on focus (don't let focus replace it),
     layered with the gold focus ring. */
  box-shadow: 0 0 0 1px rgba(190,120,230,.45), 0 0 16px rgba(170,90,225,.34), 0 0 0 3px rgba(200,168,78,0.15);
  width: 380px;
}
.site-nav-search svg {
  width: 15px;
  height: 15px;
  color: #b8923f;
  flex-shrink: 0;
}
.site-nav-search input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  font-size: 13px;
  color: #1a1205;
  font-family: inherit;
  letter-spacing: 0.1px;
}
.site-nav-search input::placeholder {
  color: rgba(26,18,5,0.5);
  font-weight: 400;
}
/* CEO R385 "search anything anytime": nav search button reuses the
   glittery champagne-gold standard (matches .search-btn-main / .pr-btn-gold),
   sized down for the compact nav so the search language reads as one system. */
.site-nav-search button {
  position: relative;
  overflow: hidden;
  background: var(--pr-gold-gloss);
  color: #1a1205;
  border: 1px solid rgba(255,244,205,0.6);
  border-radius: 100px;
  padding: 4px 12px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
  box-shadow: var(--pr-gold-gloss-shadow), 0 4px 12px rgba(200,168,78,0.42);
  transition: filter .2s, box-shadow .2s;
}
.site-nav-search button::after {
  content: ''; position: absolute; top: 2px; right: 4px; width: 9px; height: 9px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.55 6.35 5.65 11.45 12 12-6.35.55-11.45 5.65-12 12-.55-6.35-5.65-11.45-12-12C6.35 11.45 11.45 6.35 12 0z' fill='%23fffdf2'/%3E%3C/svg%3E") center/contain no-repeat;
  filter: drop-shadow(0 0 2px rgba(255,255,255,0.95)); opacity: 0.9;
}
.site-nav-search button:hover { filter: brightness(1.05); box-shadow: 0 6px 16px rgba(200,168,78,0.55), inset 0 1px 1px rgba(255,250,230,0.8); }
/* CEO 2026-05-14 consumer feedback: nav items were rendering on
   different baselines, dropdown triggers sat lower than plain links,
   the Quiz pill / Member Login CTA had inconsistent heights, and the
   logo was not level with text. Fixed by giving every nav child a
   single shared 40px box and inline-flex centering. Dropdowns are
   also inline-flex centered so the trigger anchor shares the parent
   vertical center, not its text baseline. */
.site-nav-link {
  height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 5px;
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  border-radius: var(--radius-sm);
  transition: all 0.2s;
  white-space: nowrap;
  letter-spacing: 0;
  line-height: 1;
}
.site-nav-link:hover { color: var(--white); background: rgba(255,255,255,0.08); }
.site-nav-link.active { color: var(--gold-light); }
/* Find Your Match Quiz, pink-tinted always-available CTA (CEO 2026-05-14). */
.site-nav-link.site-nav-quiz {
  color: #f9a8d4;
  font-weight: 700;
  padding: 0 13px;
  border: 1px solid rgba(236,72,153,0.45);
  border-radius: 100px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  background: rgba(236,72,153,0.06);
  transition: all 0.18s ease;
}
.site-nav-link.site-nav-quiz:hover {
  color: #fff;
  background: rgba(236,72,153,0.18);
  border-color: rgba(249,168,212,0.85);
  box-shadow: 0 0 0 3px rgba(236,72,153,0.18);
}
.site-nav-link.cta {
  background: var(--pr-gold-gloss);
  color: var(--navy);
  font-weight: 700;
  padding: 0 20px;
  height: 40px;
  border-radius: var(--radius-xl);
  margin-left: 8px;
  letter-spacing: 0;
  box-shadow: var(--pr-gold-gloss-shadow);
}
.site-nav-link.cta:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: var(--pr-gold-gloss-shadow), 0 4px 12px rgba(200,168,78,0.4); }

/* Dropdown — must be inline-flex centered so its child <a> shares the
   nav row's vertical center, not its text baseline. CEO 2026-05-14. */
.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 40px;
}
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 8px;
  min-width: 260px;
  box-shadow: var(--shadow-xl);
  z-index: 1001;
}
.nav-dropdown:hover .nav-dropdown-menu { display: block; }
.nav-dropdown-item {
  display: block;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--gray-700);
  border-radius: var(--radius-sm);
  transition: all 0.15s;
}
.nav-dropdown-item:hover { background: var(--cream); color: var(--navy); }
.nav-dropdown-item small { display: block; font-size: 11px; color: var(--gray-400); margin-top: 2px; }

/* ============================================================
   UNIFIED ACCOUNT CONTROL (CEO 2026-06-22)
   One compact, premium, social-app-style control that replaces the two big
   "Sign In" + "Member Login" nav buttons. Click-to-toggle (not hover — an
   account menu should not open on pass-over). Mobile flyout reuses the
   .nav-dropdown accordion rules in the media query below.
============================================================ */
.pr-acct { position: relative; display: inline-flex; align-items: center; height: 40px; margin-left: 8px; }
.pr-acct-persistent { display: none; }
/* Logged-out trigger: compact gold "Sign In ▾" pill (premium, matches .cta). */
.pr-acct-signin {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 16px; border-radius: var(--radius-xl);
  background: var(--pr-gold-gloss); color: var(--navy);
  font-weight: 700; font-size: 13px; letter-spacing: 0; white-space: nowrap;
  border: none; cursor: pointer; box-shadow: var(--pr-gold-gloss-shadow);
  transition: all 0.18s ease; font-family: inherit;
}
.pr-acct-signin:hover { filter: brightness(1.05); transform: translateY(-1px); }
.pr-acct-signin .pr-acct-caret { font-size: 10px; opacity: 0.85; }
/* Logged-in trigger: circular avatar chip + caret (Instagram/X style). */
.pr-acct-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 2px 10px 2px 2px; border-radius: 100px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  cursor: pointer; transition: all 0.18s ease; font-family: inherit;
}
.pr-acct-chip:hover { background: rgba(255,255,255,0.12); border-color: rgba(217,183,106,0.55); }
.pr-acct-caret { font-size: 10px; color: rgba(255,255,255,0.7); }
/* Avatar = circular photo OR initials fallback. 34px in nav. */
.pr-avatar {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pr-gold-gloss); color: var(--navy);
  font-weight: 800; font-size: 13px; overflow: hidden; line-height: 1;
}
.pr-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Business logos read as square-ish brands -> rounded-rect, neutral bg, shield fallback. */
.pr-avatar.pr-avatar-biz { border-radius: 9px; background: #11203a; color: #e8d9b0; }
/* The account menu (logged-in) and sign-in menu (logged-out) reuse the dropdown card. */
.pr-acct-menu {
  display: none; position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: var(--radius-md); padding: 8px; min-width: 264px;
  box-shadow: var(--shadow-xl); z-index: 1002;
}
.pr-acct.open .pr-acct-menu { display: block; }
.pr-acct-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 10px 12px; font-size: 13px; color: var(--gray-700);
  border-radius: var(--radius-sm); transition: all 0.15s; cursor: pointer;
  background: none; border: none; font-family: inherit; text-decoration: none;
}
.pr-acct-item:hover { background: var(--cream); color: var(--navy); }
.pr-acct-item small { display: block; font-size: 11px; color: var(--gray-400); margin-top: 1px; }
.pr-acct-item .pr-avatar { width: 30px; height: 30px; flex: 0 0 30px; font-size: 12px; }
.pr-acct-sec {
  font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gray-400); padding: 10px 12px 4px;
}
.pr-acct-div { height: 1px; background: var(--gray-200); margin: 6px 4px; }
.pr-acct-burger { display: none; } /* shown only on the mobile persistent chip (media query below) */
#pr-quicknav { display: none; }   /* quick nav lives in the mobile master flyout only (media query below) */
.pr-acct-name { font-weight: 700; }
.pr-acct-signout { color: #c0392b; }
.pr-acct-signout:hover { background: rgba(192,57,43,0.08); color: #c0392b; }

/* Mobile hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  cursor: pointer;
}
.nav-hamburger span {
  width: 22px; height: 2px; background: var(--white); border-radius: 2px; transition: all 0.3s;
}
/* Legacy persistent family account button. Superseded 2026-06-22 by the unified
   .pr-acct-persistent control (#pr-acct-cta), which now provides the always-visible
   account entry when the nav collapses (<=1340px). Kept hidden for back-compat. */
.nav-account-cta { display: none; }

/* CEO 2026-05-14: bumped 1024 → 1280 → 1340 because brand + 170px
   search + 9 nav links + Quiz/Recommend/PMW/Login CTAs need ~1300px
   of inline room and were still crashing on 1366px laptops. Below
   1340, hamburger handles everything; search becomes full-width
   inside the mobile flyout. */
@media (max-width: 1340px) {
  .site-nav-links { display: none; }
  .site-nav-links.open {
    display: flex; flex-direction: column; position: absolute; top: 68px;
    left: 0; right: 0; background: var(--navy-rich); padding: 16px 24px calc(28px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255,255,255,0.08); gap: 4px;
    /* CEO 2026-06-06 + 2026-06-07: tail items (Quiz, Recommend, File a Flag, Login)
       were cut off + unscrollable on iPhone Safari. Root cause: 100vh on iOS is TALLER than
       the visible viewport (counts the address-bar area), so max-height exceeded the real
       screen and overflow:auto never engaged — the tail fell below the fold with no scroll.
       Fix: use dvh (dynamic viewport height = the actually-visible height). vh kept as a
       fallback for browsers without dvh; overscroll-behavior keeps the scroll inside the menu. */
    max-height: calc(100vh - 70px);
    max-height: calc(100dvh - 70px);
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  }
  .site-nav-search,
  .site-nav-search:focus-within {
    width: 100%; margin: 4px 0 12px; height: 42px;
  }
  .site-nav-search input { font-size: 14px; }
  /* CEO 2026-07-27 ONE CONTROL IN THE CORNER: the account chip now opens the master flyout, so the
     hamburger was a redundant second trigger — and the extra width was pushing it off-screen. The
     chip (avatar when signed in, Sign In pill when not) is the ONLY corner control on mobile. */
  .nav-hamburger { display: none; }
  .pr-acct-persistent { margin-right: 4px; }
  .nav-account-cta {
    display: inline-flex; align-items: center; gap: 6px;
    margin-left: auto; margin-right: 12px;
    padding: 8px 18px; border-radius: 100px;
    background: var(--gold, #c8a84e); color: #0a1628;
    font-weight: 800; font-size: 13px; text-decoration: none; white-space: nowrap; flex-shrink: 0;
  }
  /* CEO 2026-05-14 Image #145: dropdown items were overlapping siblings on
     mobile because the parent .nav-dropdown stayed inline-flex height:40px
     while its position:static child overflowed visibly. Reset the parent to
     a flowing block and render the dropdown as an always-open accordion
     section in the mobile flyout (no flaky :hover dependency on touch). */
  .nav-dropdown {
    display: block; height: auto; width: 100%;
    align-items: stretch; padding: 4px 0;
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  .nav-dropdown > .site-nav-link {
    display: block; width: 100%; height: auto;
    padding: 12px 0 6px; pointer-events: none;
    color: var(--gold-light); font-size: 11.5px; font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase;
  }
  .nav-dropdown-menu {
    display: block !important;
    position: static; box-shadow: none; border: none;
    background: transparent;
    transform: none; padding: 0 0 6px 12px; min-width: 0;
    width: 100%; margin: 0;
  }
  .nav-dropdown-item {
    padding: 10px 12px;
    color: rgba(255,255,255,0.86); font-size: 14px; font-weight: 500;
  }
  .nav-dropdown-item:hover,
  .nav-dropdown-item:active { background: rgba(255,255,255,0.06); color: var(--white); }
  .nav-dropdown-item small {
    color: rgba(255,255,255,0.45); font-size: 11.5px;
    display: block; margin-top: 2px;
  }
  /* CEO 2026-06-05 Image #128: the flat (non-dropdown) links — Home, Rehomer, Partners,
     Quiz, Recommend, Report, Member Login — were inline content-width in the mobile flyout
     while the dropdowns were full-width accordions, so they floated at odd widths and were
     hard to find. Make every TOP-LEVEL link a full-width block so the menu is one neat list. */
  .site-nav-links.open > .site-nav-link {
    display: block; width: 100%; height: auto;
    padding: 12px 12px; font-size: 14px; line-height: 1.3;
    color: rgba(255,255,255,0.88); border-radius: 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  .site-nav-links.open > .site-nav-link:hover,
  .site-nav-links.open > .site-nav-link:active { background: rgba(255,255,255,0.07); }
  .site-nav-links.open > .site-nav-link.site-nav-quiz { color: var(--gold-light); }
  .site-nav-links.open > .site-nav-link.cta {
    text-align: center; margin-top: 10px; border-top: none;
    background: var(--pr-gold-gloss); color: var(--navy); font-weight: 700;
    box-shadow: var(--pr-gold-gloss-shadow);
  }
  /* CEO 2026-06-04 (Image #71): on mobile the menu is a tall always-open accordion,
     so the logged-in Member Dashboard + Sign Out (painted as the LAST items) were
     buried ~1250px down an 80vh scroll box and effectively unreachable. Pull the
     member actions to the TOP of the open mobile menu (desktop order untouched —
     this rule only lives inside the mobile media query). */
  .site-nav-links.open .pr-member-link { order: -1; }
  /* CEO 2026-06-22: in the mobile menu the bare PuppyHowls icon is too small to recognize — show the
     "PuppyHowls" word next to it (desktop stays icon-only). */
  .site-nav-links.open .site-nav-puppytok { display: inline-flex !important; align-items: center; gap: 9px; }
  .site-nav-links.open .site-nav-puppytok .pt-nav-label { display: inline !important; font-weight: 600; }
  .site-nav-links.open .pr-member-link.cta {
    display: block; width: 100%; text-align: center;
    margin: 0 0 6px; padding: 13px 18px; font-size: 15px;
  }
  .site-nav-links.open .pr-signout-link {
    order: -1; display: block; width: 100%; text-align: center;
    margin: 0 0 6px !important; padding: 11px 18px; font-size: 14px !important;
    color: rgba(255,255,255,0.7) !important; border: 1px solid rgba(255,255,255,0.16);
    border-radius: var(--radius-xl);
  }
  /* divider under the pinned member actions */
  .site-nav-links.open .pr-signout-link { box-shadow: 0 1px 0 rgba(255,255,255,0.08); }

  /* ---- Unified account control on mobile (CEO 2026-06-22) ----
     1) The in-nav control (#pr-acct-nav) sits at the TOP of the open flyout.
     2) The persistent header control (#pr-acct-cta) is shown beside the hamburger
        so the account entry stays visible when the nav collapses. */
  .pr-acct-persistent { display: inline-flex; margin-left: auto; margin-right: 12px; }
  /* CEO 2026-07-27 (final order): PROFILE FIRST — profile + Switch-profile toggle sit at the TOP of
     the master flyout, site navigation follows. The switcher stays COLLAPSED behind its toggle, so
     the long identity list can never bury the site links again (the original round-2 problem). */
  #pr-acct-nav { order: -2; width: 100%; height: auto; margin: 0 0 8px; }
  /* The corner control reads as avatar + ☰ — the hamburger lives INSIDE the profile control. */
  .pr-acct-persistent .pr-acct-burger { display: inline; }
  .pr-acct-persistent .pr-acct-caret { display: none; }
  /* CEO 2026-07-27: quick nav between the profile block (-2) and the site links (0). */
  #pr-quicknav { display: block; order: -1; width: 100%; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,0.1); }
  #pr-quicknav .pr-quicknav-sec { font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.45); padding: 8px 12px 4px; }
  /* CEO 2026-07-27: same size as the flyout site links (14px — the nested items were falling back
     to the 11.5px desktop base) and BRIGHTER white (#fff, vs the links' 0.88). */
  #pr-quicknav .site-nav-link {
    display: block; width: 100%; height: auto;
    padding: 12px 12px; font-size: 14px; line-height: 1.3;
    color: #fff; font-weight: 600; border-radius: 8px;
  }
  /* In the flyout the menu is an always-open accordion (no flaky touch :hover). */
  #pr-acct-nav .pr-acct-menu {
    display: block; position: static; box-shadow: none; border: none;
    background: transparent; padding: 0; min-width: 0; width: 100%;
  }
  /* CEO 2026-07-27 ONE MASTER MENU: in the flyout the menu is ALREADY an always-open accordion,
     so the chip/Sign-In pill inside it was pure duplication (the "stray avatar pill" + a second
     copy of the switcher in her screenshots). Hidden here — CSS-responsive, desktop unaffected. */
  #pr-acct-nav .pr-acct-signin,
  #pr-acct-nav .pr-acct-chip { display: none; }
  #pr-acct-nav .pr-acct-item { color: rgba(255,255,255,0.86); }
  #pr-acct-nav .pr-acct-item:hover { background: rgba(255,255,255,0.06); color: var(--white); }
  #pr-acct-nav .pr-acct-item small { color: rgba(255,255,255,0.45); }
  #pr-acct-nav .pr-acct-sec { color: rgba(255,255,255,0.45); }
  #pr-acct-nav .pr-acct-div { background: rgba(255,255,255,0.1); }
  #pr-acct-nav .pr-acct-signout { color: #ff8a80; }
  /* The persistent (beside-hamburger) control keeps its menu as a real popover. */
  .pr-acct-persistent .pr-acct-menu { right: 0; }
}

/* ============================================================
   CONTENT SECTIONS, Visual rhythm variants
============================================================ */
.section { padding: 96px 32px; }
.section-sm { padding: 64px 32px; }
.section-dark { background: var(--navy-rich); color: var(--white); }
.section-navy {
  background: var(--navy-rich);
  color: var(--white);
}
.section-cream { background: var(--cream); }
.section-warm { background: var(--warm-white); }
.section-gold-soft { background: var(--gold-soft); }
.section-white { background: var(--white); }
/* Angled divider section, creates visual break */
.section-angled {
  position: relative;
  clip-path: polygon(0 40px, 100% 0, 100% calc(100% - 40px), 0 100%);
  padding: 120px 32px;
}
/* Subtle side accent */
.section-accent { position: relative; }
.section-accent::before {
  content: ''; position: absolute; left: 0; top: 15%; height: 70%; width: 3px;
  background: linear-gradient(to bottom, var(--gold), transparent); border-radius: 2px;
}

.container { max-width: 1200px; margin: 0 auto; }
.container-wide { max-width: 1400px; margin: 0 auto; }
.container-narrow { max-width: 800px; margin: 0 auto; }
.container-tight { max-width: 640px; margin: 0 auto; }

/* Section typography */
.section-eyebrow {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 2.5px;
  color: var(--gold); margin-bottom: 16px; display: block;
}
.section-dark .section-eyebrow { color: var(--gold-light); }
.section-title {
  font-family: var(--font-display); font-size: 48px; font-weight: 400;
  margin-bottom: 16px; letter-spacing: -0.5px; line-height: 1.1;
}
.section-subtitle {
  font-size: 18px; color: var(--gray-500); max-width: 560px; line-height: 1.7;
}
.section-dark .section-subtitle { color: rgba(255,255,255,0.6); }

/* Impact statement, typography IS the design */
.impact-statement {
  font-family: var(--font-display); font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; color: var(--navy);
}
.impact-statement em {
  font-style: normal;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Leo header bar, kept but refined */
.leo-bar {
  background: var(--navy-rich);
  border-radius: var(--radius-lg); padding: 28px 36px;
  display: flex; align-items: center; gap: 28px; margin-bottom: 40px;
  border: 1px solid rgba(200,168,78,0.15);
  box-shadow: var(--shadow-lg);
}
.leo-bar img {
  width: 180px; height: 180px; object-fit: contain; flex-shrink: 0;
  background: var(--warm-white); border-radius: 16px; padding: 14px;
  box-shadow: var(--shadow-md);
}
.leo-bar-title {
  font-family: var(--font-display); font-size: 24px; font-weight: 400;
  color: var(--white); margin-bottom: 8px;
}
.leo-bar-desc { font-size: 14px; color: rgba(255,255,255,0.6); line-height: 1.7; }

/* ============================================================
   BUTTONS, Refined with better hierarchy
============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 28px; border-radius: var(--radius-xl);
  font-size: 14px; font-weight: 600; letter-spacing: 0.2px;
  transition: all 0.25s cubic-bezier(0.25,0.46,0.45,0.94);
  cursor: pointer; border: none; text-decoration: none;
}
.btn-gold {
  background: var(--pr-gold-gloss); color: var(--navy);
  box-shadow: var(--pr-gold-gloss-shadow);
}
.btn-gold:hover { filter: brightness(1.05); transform: translateY(-2px); box-shadow: var(--pr-gold-gloss-shadow), var(--shadow-gold); }
.btn-navy {
  background: var(--navy); color: var(--white);
  box-shadow: var(--shadow-sm);
}
.btn-navy:hover { background: var(--navy-light); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-outline {
  background: transparent; color: var(--navy);
  border: 1.5px solid var(--gray-300);
}
.btn-outline:hover { border-color: var(--navy); background: var(--navy); color: var(--white); }
.btn-white {
  background: var(--white); color: var(--navy);
  box-shadow: var(--shadow-sm);
}
.btn-white:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; color: var(--gold); padding: 13px 0; }
.btn-ghost:hover { color: var(--gold-dark); }
.btn-ghost::after { content: ' →'; transition: transform 0.2s; display: inline-block; }
.btn-ghost:hover::after { transform: translateX(4px); }
.btn-lg { padding: 16px 36px; font-size: 15px; }
.btn-sm { padding: 8px 18px; font-size: 12px; }

/* ============================================================
   CARDS, Premium with depth variants
============================================================ */
.card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0,0,0,0.04);
  padding: 32px;
  transition: all 0.35s cubic-bezier(0.25,0.46,0.45,0.94);
  box-shadow: var(--shadow-sm);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.card-elevated {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 36px; border: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.03), 0 2px 4px rgba(0,0,0,0.04), 0 12px 24px rgba(0,0,0,0.06);
  transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
}
.card-elevated:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.03), 0 4px 8px rgba(0,0,0,0.06), 0 24px 48px rgba(0,0,0,0.1);
}
.card-title { font-family: var(--font-display); font-size: 22px; font-weight: 400; margin-bottom: 12px; }
.card-text { font-size: 15px; color: var(--gray-500); line-height: 1.7; }

/* ============================================================
   LAYOUT PATTERNS, Asymmetric, editorial
============================================================ */
.split-60-40 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 64px; align-items: center; }
.split-40-60 { display: grid; grid-template-columns: 1fr 1.5fr; gap: 64px; align-items: center; }
.split-50-50 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
/* Staggered grid, first item spans 2 columns */
.grid-stagger { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-stagger > :first-child { grid-column: 1 / 3; }

/* CEO 2026-06-17 (mobile, logged-in): the wider "My PuppyReports™" pill
   (flex-shrink:0, nowrap) overflowed the header row on phones and pushed the
   hamburger menu OFF-SCREEN — so a logged-in user lost all navigation. Shrink
   the brand + account pill on small screens and make the PILL (not the
   hamburger) the element that yields, so the hamburger is ALWAYS visible. */
@media (max-width: 600px) {
  .site-nav-inner { padding: 0 14px; gap: 8px; }
  .site-nav-brand { margin-right: 8px; }
  .site-nav-brand-text { font-size: 17px; }
  .nav-account-cta {
    margin-right: 10px; padding: 7px 13px; font-size: 12px;
    min-width: 0; max-width: 46vw; overflow: hidden; text-overflow: ellipsis;
  }
  .nav-hamburger { flex-shrink: 0; }
}
/* CEO 2026-07-27: with BOTH wordmarks equal-size, the narrowest phones need one step down so the
   single corner control never clips. */
@media (max-width: 420px) {
  .site-nav-brand-text { font-size: 15px; }
  .site-nav-howls-word { font-size: 15px; margin-left: 5px; }
}
/* CEO 2026-09-22: the 📍 pin joined the brand row. On the narrowest phones (≤420px) PuppyReports + PuppyHowls wordmarks +
   PuppyFM + pin + the corner control cannot all fit, and the audit showed the pin AND the Sign-in pill clipped off-screen.
   The PuppyHowls WORD yields here (its icon stays — the 6/24 rule: PuppyHowls is a clickable icon); every control stays visible. */


@media (max-width: 768px) {
  .split-60-40, .split-40-60, .split-50-50 { grid-template-columns: 1fr; gap: 32px; }
  .grid-stagger { grid-template-columns: 1fr; }
  .grid-stagger > :first-child { grid-column: auto; }
  .feature-grid { grid-template-columns: 1fr; }
}

/* Stats bar */
.stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 48px 0; }
.stat-item { text-align: center; }
.stat-value {
  font-family: var(--font-display); font-size: 56px; font-weight: 400;
  color: var(--gold); line-height: 1;
}
.stat-label {
  font-size: 12px; color: var(--gray-400); margin-top: 8px;
  text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600;
}
@media (max-width: 768px) {
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .stat-value { font-size: 40px; }
  .section { padding: 64px 20px; }
  .section-title { font-size: 32px; }
}

/* ============================================================
   PAGE HERO, Flexible system (not one-size-fits-all)
============================================================ */
/* Default: clean minimal hero */
.page-hero {
  background: var(--cream);
  padding: 72px 32px 64px;
  text-align: center;
  color: var(--navy);
  position: relative;
  overflow: hidden;
}
.page-hero-title {
  font-family: var(--font-display); font-size: 56px; font-weight: 400;
  margin-bottom: 16px; letter-spacing: -0.5px; color: var(--navy); line-height: 1.1;
}
.page-hero-subtitle {
  font-size: 18px; color: var(--gray-500); max-width: 560px; margin: 0 auto; line-height: 1.7;
}
/* Split hero, image left, text right (or reverse) */
.page-hero-split {
  background: var(--navy-rich);
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 560px; overflow: hidden;
}
.page-hero-split-img { position: relative; overflow: hidden; }
.page-hero-split-img img { width: 100%; height: 100%; object-fit: cover; }
.page-hero-split-content {
  display: flex; flex-direction: column; justify-content: center;
  padding: 64px 56px; color: var(--white);
}
/* Full-bleed hero with overlay text */
.page-hero-full {
  position: relative; min-height: 500px;
  display: flex; align-items: center; justify-content: center;
  background-size: cover; background-position: center; padding: 80px 32px;
}
.page-hero-full::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(13,27,42,0.7), rgba(13,27,42,0.85));
}
.page-hero-full .page-hero-content { position: relative; z-index: 1; text-align: center; color: var(--white); }

/* Leo hero image, now secondary, smaller, optional */
.page-hero-leo {
  width: 160px; height: 160px; object-fit: contain;
  margin: 0 auto 24px; display: block;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.1));
  background: var(--white); border-radius: 20px; padding: 14px;
  box-shadow: var(--shadow-md);
}
@media (max-width: 768px) {
  .page-hero-leo { width: 120px; height: 120px; }
  .page-hero-title { font-size: 36px; }
  .page-hero-subtitle { font-size: 15px; }
  .page-hero-split { grid-template-columns: 1fr; min-height: auto; }
  .page-hero-split-img { max-height: 300px; }
  .page-hero-split-content { padding: 40px 24px; }
}

/* ============================================================
   FOOTER, Refined
============================================================ */
.site-footer {
  background: var(--navy-rich);
  color: rgba(255,255,255,0.5);
  padding: 72px 32px 36px;
  border-top: 2px solid var(--gold);
}
.footer-inner { max-width: 1200px; margin: 0 auto; }
/* CEO 2026-07-31: centered network statement under the twin brand marks, every page. */
.footer-network-line {
  text-align: center;
  font-family: var(--font-display), Georgia, serif;
  font-size: 19px;
  line-height: 1.35;
  color: #e8c766;
  letter-spacing: 0.02em;
  margin: 0 auto 26px;
  max-width: 820px;
}
@media (max-width: 640px) { .footer-network-line { font-size: 16px; margin-bottom: 20px; } }
/* PuppyReports + PuppyHowls double logo (CEO 2026-06-22) — smaller on mobile */
.footer-double-logo { max-width: 1100px; }
@media (max-width: 640px) { .footer-double-logo { max-width: 100%; } }
/* CEO 2026-07-27 (round 2): "PuppyHowls" matches the PuppyReports wordmark EXACTLY in size/family
   (same .site-nav-brand-text spec: display font, 20px/17px mobile) — only the Howls pink differs. */
.site-nav-howls-word { display: inline; margin-left: 7px; font-family: var(--font-display); font-weight: 400; font-size: 20px; color: #e894dc; letter-spacing: 0.3px; white-space: nowrap; }
@media (max-width: 1340px) { .site-nav-howls-word { font-size: 17px; } }
.site-nav-howls-mark img { transition: transform .15s; }
.site-nav-fm-mark img { transition: transform .15s; }
.site-nav-pin-mark { transition: transform .15s; }
.site-nav-pin-mark:hover { transform: scale(1.08); }
/* CEO 2026-09-22 (Image #27) — MUST stay after the rules above (same specificity; later wins): with the pin in the row her iPhone header overflowed and scrolled the WHOLE PAGE sideways —
   avatar + hamburger pushed off-screen. Phones: smaller labels + icons (her ask), tighter gaps, and the header may never
   widen the page. Under 480px the PuppyHowls WORD yields to its icon so the corner controls always fit. */
@media (max-width: 600px) {
  .site-nav { overflow-x: clip; }
  .site-nav-inner { padding: 0 10px; gap: 6px; }
  .site-nav-brandgroup { gap: 6px !important; min-width: 0; }
  .site-nav-brand { margin-right: 4px; }
  .site-nav-brand-text { font-size: 14px; }
  .site-nav-howls-word { font-size: 14px; margin-left: 4px; }
  .site-nav-fm-live { font-size: 8px; right: -6px; top: -5px; }
}
@media (max-width: 480px) {
  .site-nav-howls-word { display: none; }
}
/* CEO 2026-09-22 18:47 asked for a "Howls" label on the icon (people will not know what it is yet) — it used to be a gold
   tab floating ABOVE the icon on phones. SUPERSEDED 2026-09-24: every mark now carries its label INSIDE its chip at every
   width (see "PUBLIC HEADER CHIPS" below), so the floating tab CSS is gone. */

/* ── CEO 2026-09-24 (Image #34, verbatim): "top navigation logos & icons are too squished, not formatted
   correctly, logos are different sizes". One box for every mark at each breakpoint, even gaps, and the
   glyph marks (🌳) render at the same optical weight as the image marks. Absolute label pills add zero
   layout, so documentElement.scrollWidth must still equal innerWidth at 375/390. */
.site-nav-brandgroup { align-items: center; }
.site-nav-brand img { width: 40px !important; height: 40px !important; flex: 0 0 40px !important; box-sizing: border-box; object-fit: contain;
  /* the white chip is what makes four different logos read as one set of buttons */
  background: #ffffff !important; border: 1px solid #e3e5e9 !important; border-radius: 11px !important;
  padding: 4px !important; box-shadow: 0 1px 3px rgba(10,22,40,.18) !important; }
.site-nav-brand img { border-radius: 7px !important; }
.site-nav-brandgroup { gap: 10px !important; }
/* >=1341px the row is at its tightest (search box + every link); the marks step down here,
   which is why the old min-width:1341px block shrank them. Same intent, stated once. */
@media (min-width: 1341px) {
  .site-nav-brand img { width: 32px !important; height: 32px !important; flex: 0 0 32px !important; }
}

/* CEO 2026-09-25: "PuppyReports logo is way too small… should be equal or bigger since it is the brand" —
   tablet/desktop: the brand chip is a notch bigger than the 54x50 Howls/Radio/Parks chips. */
@media (min-width: 601px) {
  .site-nav-brand img { width: 54px !important; height: 54px !important; flex: 0 0 54px !important; padding: 5px !important; border-radius: 13px !important; box-shadow: 0 1px 5px rgba(0,0,0,.25) !important; }
}
@media (min-width: 601px) and (max-width: 768px) {
  .site-nav-brand img { width: 52px !important; height: 52px !important; flex: 0 0 52px !important; }
}
@media (max-width: 600px) {
  .site-nav-brandgroup { gap: 9px !important; }
  .site-nav-brand img { width: 32px !important; height: 32px !important; flex: 0 0 32px !important; }
}
@media (max-width: 420px) {
  .site-nav-brandgroup { gap: 8px !important; }
  .site-nav-brand img { width: 30px !important; height: 30px !important; flex: 0 0 30px !important; }
}

.site-nav-fm-mark:hover img { transform: scale(1.06); }
.site-nav-fm-live { position: absolute; right: -8px; top: -6px; background: #ff2d78; color: #fff; font: 800 9px/1 system-ui, -apple-system, sans-serif; letter-spacing: .08em; padding: 3px 5px; border-radius: 999px; box-shadow: 0 0 0 2px #0b0f1e; }
.site-nav-howls-mark:hover img { transform: scale(1.06); }

/* ============================================================================
   CEO 2026-09-22 (Opus) — THE WHOLE PUBLIC SITE SCROLLED SIDEWAYS ON DESKTOP.
   Measured before the fix, on www.puppyreports.com, headless WebKit at 1440x900:
   documentElement.scrollWidth = 1657 vs innerWidth 1440 = 217px of sideways
   scroll on EVERY public page (/, /nearby, /puppyfm, /about). The single
   outermost culprit was #navLinks (.site-nav-links): left 531, right 1657.
   WHY: .site-nav-inner is max-width 1400 with 28px padding = a 1344px content
   box, but it had to hold brandgroup 471 + gap 12 + navLinks 1126 = 1609. The
   flex line simply overflowed — and with it "Install App" and the "Sign In"
   button sat ENTIRELY OFF-SCREEN at 1440, unreachable without scrolling the
   page sideways. 1366 laptops were worse (299px over).
   ROOT CAUSE: a stale breakpoint budget. The @media (max-width:1340px)
   hamburger comment above budgets "brand + 170px search + 9 nav links", but
   since then the search grew to 340px (CEO 2026-07-22, so the placeholder
   stops clipping) and the brandgroup gained the PuppyHowls wordmark, the
   PuppyFM LIVE mark and the Nearby pin (+~240px). Nobody re-measured.
   FIX — nothing is hidden and html/body overflow is NOT clipped (that would
   have buried the Sign In button instead of revealing it): a compact desktop
   band trims the header chrome (icons 40->32, wordmarks 20->16px, link padding
   5->3px, inner padding 28->12px, nav links 11.5->11px) so all 12 items fit
   inside 1400, AND the search is made the elastic member of the row
   (flex-shrink:1 + min-width, with .site-nav-links min-width:0 so the row is
   allowed to shrink at all). It keeps its full 340px wherever there is room
   and gives width back only as needed — so adding a nav item can never push
   the page sideways again, it just narrows the search.
   MEASURED AFTER (live, WebKit): scrollWidth === innerWidth at 1341 / 1366 /
   1400 / 1440 / 1512 / 1600 / 1920 / 2560, all 12 nav items on screen, and the
   full placeholder "Search breeders, rescues, breeds…" fits at 1400+.
   Phones are untouched — the CEO 2026-09-22 (Image #27) rules above still own
   <=600px/<=480px, and this band starts at 1341px.
   ⛔ IF YOU ADD A NAV ITEM: re-measure documentElement.scrollWidth at 1341 and
   1440 in WebKit. Do not "fix" a regression here with overflow:hidden.
============================================================================ */
@media (min-width: 1341px) {
  .site-nav-inner { padding: 0 12px; gap: 8px; }
  .site-nav-brandgroup { gap: 7px !important; min-width: 0; }
  .site-nav-brand { margin-right: 6px; gap: 7px; }
  .site-nav-brand-text { font-size: 16px; }
  .site-nav-howls-word { font-size: 16px; margin-left: 5px; }
  .site-nav-links { min-width: 0; gap: 0; }
  .site-nav-link { padding: 0 3px; font-size: 11px; }
  .site-nav-link.site-nav-quiz { padding: 0 8px; }
  /* the search is the elastic member of the row: full 340px when there is room,
     narrower when there is not, never below min-width, never overflowing. */
  .site-nav-search { width: 340px; min-width: 186px; flex-shrink: 1; margin-right: 3px; }
  .site-nav-search:focus-within { width: 340px; }   /* focus must NOT widen it past the row */
  .site-nav-search button { padding: 0 10px; font-size: 10px; }
  .site-nav-search input { font-size: 12px; }
}
/* 1341-1400: .site-nav-inner is narrower than its 1400px cap, so the search
   needs to give up a little more before the row would overflow. */
@media (min-width: 1341px) and (max-width: 1400px) {
  .site-nav-search { min-width: 168px; }
}
/* ══ PUBLIC HEADER CHIPS — ONE BLOCK (CEO 2026-09-24, verbatim): "HOWLS TOP NAVIGATION MENU LOOKS INCREDIBLE- GREAT JOB!
   NOW ON THE PUPPYREPORTS MAIN PAGE TOP NAVIGATION CAN WE MAKE THE HOWLS ICON, RADIO ICON, AND PARKS ICON MATCH EXACTLY
   WHAT YOU DID ON THE HOWLS TOP NAVIGATION MEANING SAME SIZE ICONS, LABELING INSIDE OF BUTTONS WITH ICON."
   Howls / Radio / Parks are the Howls top-bar chip (dashboard/member-dashboard.html .md-tb-cell, 042aee1f50): white,
   50px tall, 13px radius, 1px #e3e5e9 border, the same shadow; the icon sits in a 24px slot (logo art 24x24, the 🌳 emoji
   19px) over a 9px/800 label INSIDE the chip. Desktop chips are the Howls desktop chip, 54x50, 8px apart.
   Phones: the row is logo + wordmark + 3 chips + the account control, so the chips narrow (44 → 42 → 38px wide, still 50
   tall, still 9px labels) and the WORDMARK is what yields at 320 (CEO rule: shrink the wordmark, never the chips).
   Selectors carry .site-nav so they outrank the older !important mark rules above. This block is the only place these
   three chips are sized — edit it, do not add another layer. Gate: node tools/measure-public-header-chips.js */
.site-nav .site-nav-brandgroup { gap: 8px !important; }
.site-nav .site-nav-brandgroup a.site-nav-chip {
  position: relative; display: flex !important; flex-direction: column !important; align-items: center !important;
  justify-content: center !important; gap: 2px !important;
  width: 54px !important; height: 50px !important; flex: 0 0 54px !important; min-width: 0 !important;
  margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; overflow: hidden !important;
  border-radius: 13px !important; background: #ffffff !important; border: 1px solid #e3e5e9 !important;
  box-shadow: 0 1px 5px rgba(0,0,0,.25) !important; color: #20242c !important;
  text-decoration: none !important; line-height: 1 !important; font-size: 19px !important; transform: none !important;
}
.site-nav .site-nav-brandgroup a.site-nav-chip:hover { transform: none !important; border-color: #d9b76a !important; }
.site-nav .site-nav-brandgroup a.site-nav-chip img.site-nav-chip-img {
  display: block !important; width: 24px !important; height: 24px !important; flex: 0 0 auto !important;
  padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important;
  border-radius: 6px !important; object-fit: cover !important; transform: none !important;
}
.site-nav .site-nav-brandgroup a.site-nav-fm-mark img.site-nav-chip-img { border-radius: 50% !important; }
.site-nav .site-nav-brandgroup .site-nav-chip-ico {
  display: flex !important; align-items: center; justify-content: center; height: 24px !important;
  font-size: 19px !important; line-height: 1 !important;
}
.site-nav .site-nav-brandgroup .site-nav-chip-lbl {
  display: block !important; position: static !important; margin: 0 !important; padding: 0 !important;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif !important; font-size: 9px !important; font-weight: 800 !important;
  line-height: 1.1 !important; letter-spacing: 0 !important; color: #20242c !important; white-space: nowrap !important;
  max-width: 100%; overflow: hidden;
}
@media (max-width: 600px) {
  .site-nav .site-nav-brandgroup { gap: 6px !important; }
  .site-nav .site-nav-brand { margin-right: 0 !important; gap: 6px !important; }
  .site-nav .site-nav-brandgroup a.site-nav-chip { width: 44px !important; flex-basis: 44px !important; }
  /* the hamburger is hidden ≤1340 (the account control is the corner control), so its 12px right margin was dead space */
  .site-nav .pr-acct-persistent { margin-right: 0 !important; }
}
@media (max-width: 420px) {
  .site-nav .site-nav-brandgroup a.site-nav-chip { width: 42px !important; flex-basis: 42px !important; }
  .site-nav .pr-acct-persistent .pr-acct-signin { padding: 0 11px !important; }
  .site-nav .pr-acct-persistent .pr-acct-chip { padding: 2px 7px 2px 2px !important; }
  .site-nav .pr-acct-persistent .pr-acct-burger { margin-left: 4px !important; }
}
@media (max-width: 360px) {
  .site-nav .site-nav-inner { padding: 0 8px !important; gap: 5px !important; }
  .site-nav .site-nav-brandgroup { gap: 4px !important; }
  .site-nav .site-nav-brand { gap: 5px !important; }
  .site-nav .site-nav-brand img { width: 28px !important; height: 28px !important; flex: 0 0 28px !important; padding: 3px !important; }
  .site-nav .site-nav-brand-text { font-size: 11px !important; }
  .site-nav .site-nav-brandgroup a.site-nav-chip { width: 38px !important; flex-basis: 38px !important; }
}

/* ══ CEO 2026-09-25: PHONES — ONE HEADER ROW. PuppyReports logo + name become a chip like Howls / Radio / Parks; Memberships · Tools ·
   Recommend · File a Flag join the row; Sign In is a matching chip. Everything shares the width, so it fits 320–600 with no second row. */
.site-nav .site-nav-brandgroup a.pr-hchip { display:none !important; }
@media (max-width:600px){
  .pr-mnav { display:none !important; }
  .site-nav .site-nav-inner { padding:0 5px !important; gap:3px !important; }
  .site-nav .site-nav-brandgroup { flex:1 1 auto !important; min-width:0 !important; gap:3px !important; }
  .site-nav .site-nav-brandgroup a.pr-hchip { display:flex !important; }
  .site-nav .site-nav-brandgroup a.site-nav-chip, .site-nav .site-nav-brand {
    flex:1 1 0 !important; width:auto !important; min-width:0 !important; height:46px !important; padding:0 1px !important; }
  /* each chip starts at its own label width (+3px each side) and the spare room is shared — nothing clipped */
  .site-nav .site-nav-brandgroup a.site-nav-chip, .site-nav .site-nav-brand { flex:1 1 0 !important; min-width:min-content !important; padding:0 2px !important; }
  .site-nav .site-nav-brandgroup .site-nav-chip-lbl, .site-nav .site-nav-brand .site-nav-brand-text, .site-nav .pr-acct-persistent .pr-acct-signin { font-size:clamp(6px, 1.82vw, 7.4px) !important; }
  .site-nav .site-nav-brandgroup .site-nav-chip-lbl, .site-nav .site-nav-brand .site-nav-brand-text { overflow:visible !important; }
  .site-nav .site-nav-brandgroup .site-nav-chip-lbl { font-size:clamp(6px, 1.82vw, 7.4px) !important; letter-spacing:-.2px !important; }
  .site-nav .site-nav-brandgroup a.site-nav-chip img.site-nav-chip-img { width:20px !important; height:20px !important; }
  .site-nav .site-nav-brandgroup .site-nav-chip-ico { height:20px !important; font-size:16px !important; }
  .site-nav .site-nav-brandgroup .site-nav-chip-ico svg { width:17px; height:17px; }
  /* the PuppyReports chip */
  .site-nav .site-nav-brand { display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important;
    gap:2px !important; margin:0 !important; border-radius:13px !important; background:#fff !important; border:1px solid #e3e5e9 !important;
    box-shadow:0 1px 5px rgba(0,0,0,.25) !important; box-sizing:border-box !important; overflow:hidden !important; }
  .site-nav .site-nav-brand img { width:20px !important; height:20px !important; flex:0 0 20px !important; padding:0 !important; border:0 !important; box-shadow:none !important; background:none !important; }
  .site-nav .site-nav-brand .site-nav-brand-text { display:block !important; font:800 clamp(6px, 1.82vw, 7.4px)/1.1 system-ui,-apple-system,sans-serif !important; letter-spacing:-.2px !important; color:#20242c !important; -webkit-text-fill-color:#20242c !important; background:none !important; text-shadow:none !important; filter:none !important; white-space:nowrap !important; }
  .site-nav .site-nav-brand .site-nav-brand-text span { display:none !important; }
  .site-nav .site-nav-brandgroup a.pr-hchip-mem { background:linear-gradient(180deg,#e2bd66 0%,#c9a044 55%,#b08a31 100%) !important; border-color:#b98d2c !important; box-shadow:0 2px 8px rgba(200,168,78,.5) !important; }
  .site-nav .site-nav-brandgroup a.pr-hchip-mem .site-nav-chip-lbl, .site-nav .site-nav-brandgroup a.pr-hchip-mem .site-nav-chip-ico { color:#1a1408 !important; }
  .site-nav .site-nav-brandgroup a.pr-hchip-rec .site-nav-chip-ico { color:#c39a3e !important; } .site-nav .site-nav-brandgroup a.pr-hchip-rec .site-nav-chip-lbl { color:#8a6d24 !important; }
  .site-nav .site-nav-brandgroup a.pr-hchip-flag .site-nav-chip-ico, .site-nav .site-nav-brandgroup a.pr-hchip-flag .site-nav-chip-lbl { color:#dc2626 !important; }
  @media (max-width:360px){
    .site-nav .site-nav-brand .site-nav-brand-text { display:none !important; }
    .site-nav .site-nav-brand img { display:block !important; width:24px !important; height:24px !important; min-width:24px !important; flex:0 0 24px !important; }
    .site-nav .site-nav-brand { min-width:30px !important; }
    .site-nav .site-nav-brandgroup a.site-nav-chip, .site-nav .site-nav-brand { padding:0 2px !important; }
    .site-nav .site-nav-inner, .site-nav .site-nav-brandgroup { gap:2px !important; }
    .site-nav .pr-acct-persistent .pr-acct-signin { width:34px !important; }
  }
  /* CEO 9/25 round 2: order PuppyReports · Howls · Radio · Parks · Tools · Memberships · ⭐ · 🚩 — the brand chip is the biggest,
     Recommend and File a Flag are small icon-only chips (names stay as aria-labels) */
  .site-nav .site-nav-brandgroup a.pr-hchip-rec, .site-nav .site-nav-brandgroup a.pr-hchip-flag { flex:0 0 28px !important; min-width:28px !important; width:28px !important; padding:0 !important; }
  .site-nav .site-nav-brandgroup a.pr-hchip-rec .site-nav-chip-lbl, .site-nav .site-nav-brandgroup a.pr-hchip-flag .site-nav-chip-lbl { display:none !important; }
  .site-nav .site-nav-brandgroup a.pr-hchip-rec .site-nav-chip-ico svg, .site-nav .site-nav-brandgroup a.pr-hchip-flag .site-nav-chip-ico svg { width:20px; height:20px; }
  .site-nav .site-nav-brandgroup a.pr-hchip-rec .site-nav-chip-ico svg { fill:#e2b64c; }
  .site-nav .site-nav-brandgroup a.pr-hchip-flag .site-nav-chip-ico svg { fill:#dc2626; }
  .site-nav .site-nav-brandgroup .site-nav-brand { flex:1.5 1 0 !important; }
  .site-nav .site-nav-brandgroup .site-nav-brand img, .site-nav .site-nav-brand img { width:28px !important; height:28px !important; flex:0 0 28px !important; min-width:28px !important; }
  @media (max-width:360px){
    .site-nav .site-nav-brand .site-nav-brand-text { display:block !important; font-size:6.4px !important; }
    .site-nav .site-nav-brandgroup .site-nav-brand img { width:26px !important; height:26px !important; flex:0 0 26px !important; min-width:26px !important; }
    .site-nav .site-nav-brandgroup a.pr-hchip-rec, .site-nav .site-nav-brandgroup a.pr-hchip-flag { flex-basis:25px !important; min-width:25px !important; width:25px !important; }
  }
  @media (max-width:340px){
    .site-nav .site-nav-brand .site-nav-brand-text { display:none !important; }
    .site-nav .site-nav-brandgroup .site-nav-brand img { width:32px !important; height:32px !important; flex:0 0 32px !important; min-width:32px !important; }
  }
  /* Sign In = matching chip (person icon + label); signed-in avatar stays compact */
  .site-nav .pr-acct-persistent { flex:0 0 auto !important; margin:0 !important; }
  .site-nav .pr-acct-persistent .pr-acct-signin { display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:flex-end !important;
    width:38px !important; min-width:0 !important; height:46px !important; padding:0 0 6px !important; border-radius:13px !important;
    font:800 7.2px/1 system-ui,-apple-system,sans-serif !important; letter-spacing:-.2px !important; white-space:nowrap !important; color:#20242c !important;
    background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a31' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E") center 7px/18px no-repeat !important;
    border:1px solid #e3e5e9 !important; box-shadow:0 1px 5px rgba(0,0,0,.25) !important; }
  .site-nav .pr-acct-persistent .pr-acct-caret, .site-nav .pr-acct-persistent .pr-acct-burger { display:none !important; }
  /* signed in: the avatar becomes the same 38x46 chip */
  .site-nav .pr-acct-persistent .pr-acct-chip { width:38px !important; height:46px !important; padding:0 !important; gap:0 !important; justify-content:center !important;
    border-radius:13px !important; background:#fff !important; border:1px solid #e3e5e9 !important; box-shadow:0 1px 5px rgba(0,0,0,.25) !important; }
  .site-nav .pr-acct-persistent .pr-acct-chip > :first-child { width:30px !important; height:30px !important; flex:0 0 30px !important; }
}
/* CEO 2026-09-25: "on all devices only 1 row of buttons" — tablets / small laptops (601–1340px) get the same one-row
   header as phones: PuppyReports · Howls · Radio · Parks · Tools · Memberships · ⭐ · 🚩 · Sign In. The second chip row (#prMnav) is retired. */
@media (min-width:601px) and (max-width:1340px){
  .pr-mnav { display:none !important; }
  .site-nav .site-nav-brandgroup a.pr-hchip { display:flex !important; }
  .site-nav .site-nav-brandgroup a.pr-hchip-mem { width:84px !important; flex:0 0 84px !important; background:linear-gradient(180deg,#e2bd66 0%,#c9a044 55%,#b08a31 100%) !important; border-color:#b98d2c !important; box-shadow:0 2px 8px rgba(200,168,78,.5) !important; }
  .site-nav .site-nav-brandgroup a.pr-hchip-mem .site-nav-chip-lbl, .site-nav .site-nav-brandgroup a.pr-hchip-mem .site-nav-chip-ico { color:#1a1408 !important; }
  .site-nav .site-nav-brandgroup a.pr-hchip-rec, .site-nav .site-nav-brandgroup a.pr-hchip-flag { width:40px !important; flex:0 0 40px !important; }
  .site-nav .site-nav-brandgroup a.pr-hchip-rec .site-nav-chip-lbl, .site-nav .site-nav-brandgroup a.pr-hchip-flag .site-nav-chip-lbl { display:none !important; }
  .site-nav .site-nav-brandgroup a.pr-hchip-rec .site-nav-chip-ico svg, .site-nav .site-nav-brandgroup a.pr-hchip-flag .site-nav-chip-ico svg { width:22px; height:22px; }
  .site-nav .site-nav-brandgroup a.pr-hchip-rec .site-nav-chip-ico svg { fill:#e2b64c; color:#c39a3e; }
  .site-nav .site-nav-brandgroup a.pr-hchip-flag .site-nav-chip-ico svg { fill:#dc2626; color:#dc2626; }
  .site-nav .site-nav-brandgroup .site-nav-chip-ico svg { width:20px; height:20px; }
  .site-nav .site-nav-brandgroup { gap:8px !important; }
}
@media (min-width:601px) and (max-width:900px){
  .site-nav .site-nav-brand .site-nav-brand-text { display:none !important; }
  .site-nav .site-nav-brandgroup { gap:6px !important; }
}
@media (min-width:601px) and (max-width:760px){
  .site-nav .site-nav-inner { padding:0 10px !important; gap:6px !important; }
  .site-nav .site-nav-brand { margin-right:0 !important; }
  .site-nav .site-nav-brandgroup { gap:5px !important; }
  .site-nav .site-nav-brandgroup a.site-nav-chip { width:50px !important; flex:0 0 50px !important; }
  .site-nav .site-nav-brandgroup a.pr-hchip-mem { width:80px !important; flex:0 0 80px !important; }
  .site-nav .site-nav-brandgroup a.pr-hchip-rec, .site-nav .site-nav-brandgroup a.pr-hchip-flag { width:36px !important; flex:0 0 36px !important; }
}
/* ══ CEO 2026-09-26 (Image #54) SITEWIDE COLOR POLISH — midnight header, dark chips with neon rims (pink Howls, blue Radio,
   green Parks, violet Tools, gold Memberships/star, red flag), white labels, gold-rimmed PuppyReports chip. Every page shares it. */
.site-nav { background:#05070d !important; box-shadow:0 1px 0 rgba(255,255,255,.04), 0 2px 18px rgba(236,72,153,.18) !important; }
.site-nav::after { content:''; position:absolute; left:0; right:0; bottom:0; height:2px; pointer-events:none;
  background:linear-gradient(90deg, rgba(56,189,248,0) 0%, #38bdf8 20%, #a855f7 50%, #ec4899 80%, rgba(236,72,153,0) 100%); opacity:.75; }
.site-nav .site-nav-brandgroup a.site-nav-chip { background:#0b0f1e !important; color:#fff !important; border:2px solid var(--pr-rim,#e2b24c) !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.05) inset, 0 0 12px var(--pr-rim-glow,rgba(226,178,76,.55)) !important; }
.site-nav .site-nav-brandgroup a.site-nav-chip .site-nav-chip-lbl { color:#fff !important; }
.site-nav .site-nav-brandgroup a.site-nav-chip .site-nav-chip-ico { color:#fff !important; }
.site-nav .site-nav-brandgroup a.site-nav-chip:hover { border-color:#fff !important; }
.site-nav .site-nav-brandgroup a.site-nav-howls-mark { --pr-rim:#ec4899; --pr-rim-glow:rgba(236,72,153,.6); }
.site-nav .site-nav-brandgroup a.site-nav-fm-mark { --pr-rim:#38bdf8; --pr-rim-glow:rgba(56,189,248,.6); }
.site-nav .site-nav-brandgroup a.site-nav-pin-mark { --pr-rim:#e2b24c; --pr-rim-glow:rgba(226,178,76,.55); }
.site-nav .site-nav-brandgroup a.pr-hchip[data-pr-sheet="tools"] { --pr-rim:#818cf8; --pr-rim-glow:rgba(129,140,248,.6); }
.site-nav .site-nav-brandgroup a.pr-hchip-mem { --pr-rim:#f3cf72; --pr-rim-glow:rgba(243,207,114,.6); background:#0b0f1e !important; }
.site-nav .site-nav-brandgroup a.pr-hchip-mem .site-nav-chip-lbl, .site-nav .site-nav-brandgroup a.pr-hchip-mem .site-nav-chip-ico { color:#f5d98a !important; }
.site-nav .site-nav-brandgroup a.pr-hchip-rec { --pr-rim:#f3cf72; --pr-rim-glow:rgba(243,207,114,.55); }
.site-nav .site-nav-brandgroup a.pr-hchip-flag { --pr-rim:#ef4444; --pr-rim-glow:rgba(239,68,68,.5); background:#fff !important; }
/* the PuppyReports brand chip: dark with a gold rim; the name in gold */
.site-nav .site-nav-brand img { background:#0b0f1e !important; border:2px solid #e2b24c !important; box-shadow:0 0 12px rgba(226,178,76,.5) !important; }
@media (max-width:600px){
  .site-nav .site-nav-brand { background:#0b0f1e !important; border:2px solid #e2b24c !important; box-shadow:0 0 12px rgba(226,178,76,.5) !important; }
  .site-nav .site-nav-brand img { border:0 !important; box-shadow:none !important; }
  .site-nav .site-nav-brand .site-nav-brand-text { color:#f5d98a !important; -webkit-text-fill-color:#f5d98a !important; }
  .site-nav .pr-acct-persistent .pr-acct-signin { background-color:#0b0f1e !important; color:#fff !important; border:2px solid #38bdf8 !important; box-shadow:0 0 10px rgba(56,189,248,.5) !important; }
  .site-nav .pr-acct-persistent .pr-acct-chip { background:#0b0f1e !important; border:2px solid #38bdf8 !important; }
}
@media (max-width:380px){ .site-nav .site-nav-brandgroup a.site-nav-chip, .site-nav .site-nav-brand { border-width:1.5px !important; } .site-nav .site-nav-brand { padding:0 1px !important; } }
/* desktop pills in the link row */
.site-nav .pr-nav-mem { background:#0b0f1e !important; color:#f5d98a !important; border:2px solid #f3cf72 !important; box-shadow:0 0 12px rgba(243,207,114,.5) !important; }
.site-nav .pr-nav-tools, .site-nav .pr-nav-pill { background:#0b0f1e !important; color:#fff !important; border:2px solid #818cf8 !important; box-shadow:0 0 10px rgba(129,140,248,.45) !important; }
.site-nav a.site-nav-link.pr-nav-tools, .site-nav a.site-nav-link.pr-nav-tools:hover { background:#0b0f1e !important; color:#fff !important; border:2px solid #818cf8 !important; }
.site-nav a.site-nav-link.pr-nav-pill:hover, .site-nav a.site-nav-link.pr-nav-mem:hover { background:#141a30 !important; }
.site-nav a.site-nav-link.pr-nav-rec { color:#f5d98a !important; }
.site-nav a.site-nav-link.pr-nav-flag { color:#fecaca !important; }
.site-nav a.site-nav-link.pr-nav-mem { color:#f5d98a !important; }
.site-nav .pr-nav-rec { border-color:#f3cf72 !important; color:#f5d98a !important; box-shadow:0 0 10px rgba(243,207,114,.45) !important; }
.site-nav .pr-nav-flag { border-color:#ef4444 !important; color:#fecaca !important; box-shadow:0 0 10px rgba(239,68,68,.45) !important; }
.site-nav .pr-mnav { background:#05070d !important; }
.site-nav .pr-mchip { background:#0b0f1e !important; color:#fff !important; border:2px solid #818cf8 !important; }
/* Footer co-branded twin icons (PuppyReports home + PuppyHowls home) — top of every footer. */
.footer-twin-brands { display: flex; align-items: center; justify-content: center; gap: 34px; margin: 4px auto 26px; flex-wrap: wrap; }
.footer-twin-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; transition: transform .15s; }
.footer-twin-brand:hover { transform: translateY(-3px); }
.footer-twin-brand img { width: 84px; height: 84px; object-fit: contain; border-radius: 18px; display: block; filter: drop-shadow(0 6px 18px rgba(0,0,0,.45)); }
.footer-twin-brand .ftb-fm-mark { width: 84px; height: 84px; border-radius: 18px; display: block; filter: drop-shadow(0 6px 18px rgba(0,0,0,.45)) drop-shadow(0 0 14px rgba(225,90,205,.28)); }
.footer-twin-brand .ftb-name { font-family: Georgia, serif; font-weight: 700; font-size: 15px; color: var(--gold, #c8a84e); letter-spacing: .01em; }
.footer-twin-brand .ftb-sub { font-size: 10.5px; color: rgba(234,215,154,0.7); letter-spacing: .03em; }
@media (max-width: 640px) { .footer-twin-brands { gap: 22px; } .footer-twin-brand img, .footer-twin-brand .ftb-fm-mark { width: 66px; height: 66px; } .footer-twin-brand .ftb-name { font-size: 13.5px; } }
/* Always-available CTA bar (CEO 2026-05-02), sits at the top of every footer */
.footer-ctas {
  display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
  padding: 0 0 32px; margin-bottom: 36px;
  border-bottom: 1px solid rgba(200,168,78,0.18);
}
.footer-cta-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 22px; border-radius: 50px;
  border: 1.5px solid rgba(200,168,78,0.5);
  background: transparent; color: rgba(232,197,71,0.9);
  font-family: var(--font-body); font-size: 13px; font-weight: 700;
  text-decoration: none; transition: all 0.2s; letter-spacing: 0.2px;
  white-space: nowrap;
}
.footer-cta-btn:hover {
  background: var(--pr-gold-gloss); color: var(--navy); border-color: var(--gold);
  transform: translateY(-1px); box-shadow: var(--pr-gold-gloss-shadow);
}
/* CEO 2026-06-21: canonical premium glossy gold on the footer primary CTAs (was the 2026-06-05 glittery gradient; standardized sitewide). */
.footer-cta-btn.footer-cta-primary {
  background: var(--pr-gold-gloss);
  color: #1a1205; border-color: rgba(255,244,205,0.6);
  box-shadow: var(--pr-gold-gloss-shadow);
  position: relative; overflow: hidden;
}
.footer-cta-btn.footer-cta-primary::after {
  content: ''; position: absolute; top: 4px; right: 7px; width: 12px; height: 12px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.55 6.35 5.65 11.45 12 12-6.35.55-11.45 5.65-12 12-.55-6.35-5.65-11.45-12-12C6.35 11.45 11.45 6.35 12 0z' fill='%23fffdf2'/%3E%3C/svg%3E") center/contain no-repeat;
  filter: drop-shadow(0 0 3px rgba(255,255,255,0.95)); opacity: 0.85;
}
.footer-cta-btn.footer-cta-primary:hover {
  filter: brightness(1.05); border-color: rgba(255,244,205,0.8);
  box-shadow: 0 10px 24px rgba(200,168,78,0.5), inset 0 1px 1px rgba(255,250,230,0.8);
}
@media (max-width: 768px) {
  .footer-ctas { gap: 8px; padding-bottom: 24px; margin-bottom: 28px; }
  .footer-cta-btn { padding: 9px 16px; font-size: 12px; }
}
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 48px; margin-bottom: 48px;
}
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
.footer-brand {
  font-family: var(--font-display); font-size: 24px; font-weight: 400;
  color: var(--white); margin-bottom: 12px;
}
.footer-brand span { color: var(--gold); }
.footer-brand-desc { font-size: 14px; line-height: 1.7; margin-bottom: 16px; }
/* CEO 2026-06-05 Image #103: the 7 PuppyReports Card data categories live in the footer now (SEO + secondary nav), gold-line icons. */
.footer-cardrow { margin: 8px auto 40px; max-width: 1000px; text-align: center; padding-top: 28px; border-top: 1px solid rgba(200,168,78,0.16); }
.footer-cardrow-h { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 18px; }
.footer-cardrow-icons { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 30px; }
.footer-cic { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 86px; text-decoration: none; transition: transform .15s; }
.footer-cic:hover { transform: translateY(-2px); }
.footer-cic svg { width: 26px; height: 26px; }
.footer-cic .lbl { font-size: 9.5px; letter-spacing: 0.08em; font-weight: 700; text-transform: uppercase; color: rgba(234,215,154,0.82); line-height: 1.2; }
.footer-cic.flag .lbl { color: #d6453a; }
.footer-cic:hover .lbl { color: var(--gold); }
@media (max-width: 768px) { .footer-cardrow-icons { gap: 14px 16px; } .footer-cic { width: 70px; } .footer-cic svg { width: 23px; height: 23px; } .footer-cic .lbl { font-size: 8.5px; } }
/* ============================================================
   CEO 2026-06-05: GLITTERY JEWELRY-GOLD CTA STANDARD (from the LC 'Explore Member Benefits' button she loved).
   Reusable sitewide for all MAJOR gold CTAs. Metallic multi-stop gold + inset highlight + static corner sparkle (no flashing).
   ============================================================ */
.pr-btn-gold {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--pr-gold-gloss);
  color: #1a1205; font-weight: 800; text-decoration: none; cursor: pointer;
  border: 1px solid rgba(255,244,205,0.6); border-radius: 100px;
  padding: 14px 30px; font-size: 15px; letter-spacing: 0.01em; font-family: var(--font-body);
  box-shadow: var(--pr-gold-gloss-shadow), 0 10px 26px rgba(200,168,78,0.42);
  position: relative; overflow: hidden; transition: transform .2s, box-shadow .2s, filter .2s;
}
.pr-btn-gold::after {
  content: ''; position: absolute; top: 5px; right: 9px; width: 14px; height: 14px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.55 6.35 5.65 11.45 12 12-6.35.55-11.45 5.65-12 12-.55-6.35-5.65-11.45-12-12C6.35 11.45 11.45 6.35 12 0z' fill='%23fffdf2'/%3E%3C/svg%3E") center/contain no-repeat;
  filter: drop-shadow(0 0 3px rgba(255,255,255,0.95)); opacity: 0.9;
}
.pr-btn-gold:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(200,168,78,0.6), inset 0 1px 1px rgba(255,250,230,0.8); filter: brightness(1.05); color: #1a1205; }
.footer-col-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 2px; color: rgba(255,255,255,0.7); margin-bottom: 20px;
}
.footer-link {
  display: block; font-size: 13px; color: rgba(255,255,255,0.45);
  padding: 5px 0; transition: color 0.2s;
}
.footer-link:hover { color: var(--gold); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; flex-wrap: wrap; gap: 12px;
  color: rgba(255,255,255,0.35);
}
.footer-bottom a { color: rgba(255,255,255,0.4); }
.footer-bottom a:hover { color: var(--gold); }
/* CEO 2026-05-08 PM: site-wide footer disclaimer expanded from the older
   one-line "research and transparency directory" all-caps line to the full
   CEO-approved paragraph from /faqs (locked at commit ba3cb5d). Style is
   "fine print but readable", small italic, light gray, comfortable
   line-height, max-width so it doesn't stretch edge-to-edge on wide screens. */
.footer-no-broker {
  text-align: center; padding: 18px 0 0; margin: 18px auto 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 12px; font-weight: 400; line-height: 1.65;
  color: rgba(255,255,255,0.55); font-style: italic;
  max-width: 980px;
}
.footer-no-broker a { color: var(--gold); text-decoration: underline; }
.footer-no-broker a:hover { color: #e4b94e; }

/* ============================================================
   UTILITIES
============================================================ */
.text-center { text-align: center; }
.text-gold { color: var(--gold); }
.text-white { color: var(--white); }
.text-navy { color: var(--navy); }
.text-muted { color: var(--gray-500); }
.mt-4 { margin-top: 16px; }
.mt-8 { margin-top: 32px; }
.mt-12 { margin-top: 48px; }
.mt-16 { margin-top: 64px; }
.mb-4 { margin-bottom: 16px; }
.mb-8 { margin-bottom: 32px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.gap-8 { gap: 32px; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-col { flex-direction: column; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 768px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* Page content */
.page-content { min-height: 60vh; }

/* MOBILE WHITE-GAP FIX (CEO 2026-06-07, Images #4/#5): block hero sections let
   their inner grid's mobile push-down (margin-top:calc(NNvw - 104px)) collapse OUT
   through the section, dragging the whole hero down ~115px and exposing the cream
   body background as a white band under the sticky nav. display:flow-root makes the
   section CONTAIN that margin so the push-down happens inside the photo, not above
   it. !important beats page-level base display:block (which loads later in cascade).
   Excludes flex heroes (.bp-hero/.rp-hero) which don't margin-collapse. */
@media (max-width: 700px) {
  .pmw-hero, .dsw-hero, .cc-hero, .cn-hero, .faq-hero-bg, .it-hero,
  .mb-hero, .rsm-hero, .tb-page-hero, .bq-hero, .fr-hero, .lc-hero {
    display: flow-root !important;
  }
}

/* Squarespace content wrapper, preserves pricing page layouts */
.sqsp-content-wrapper { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* Badge images */
.badge-img { height: 64px; width: auto; object-fit: contain; }
.badge-img-lg { height: 100px; width: auto; object-fit: contain; }

/* Photo treatment, editorial crop */
.photo-frame {
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.photo-frame img { width: 100%; height: 100%; object-fit: cover; }

/* Gold accent line */
.gold-line { width: 48px; height: 3px; background: var(--gold); border-radius: 2px; }
.gold-line-center { margin: 0 auto; }

/* CEO 2026-06-06 (#227): the "View my official PuppyReports Card" button from the Silver
   infographic, replicated as a reusable SITEWIDE component (logo + label + gold arrow circle).
   Use class .pr-cardbtn with window.prCardBtnHTML() inner markup. */
/* CEO 2026-07-30: this is THE call-to-action on every card — it must read as the
   button, not as a label. Thicker gold border + breathing glow, larger serif line,
   red arrow disc. */
.pr-cardbtn {
  display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box;
  background: linear-gradient(180deg,#0b1524 0%,#16253c 100%);
  border: 2.5px solid var(--pr-cta-edge, #34c77b);
  border-radius: 14px; padding: 13px 14px; text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 18px var(--pr-cta-glow, rgba(52,199,123,.42));
  transition: transform .15s, box-shadow .15s, border-color .15s;
  max-width: 100%; vertical-align: middle; cursor: pointer;
  animation: prCardBtnGlow 2.6s ease-in-out infinite;
}
/* State system: the CTA glow matches the verdict shown in the tiles. */
.pr-cardbtn.is-alert { --pr-cta-edge: #ff463c; --pr-cta-glow: rgba(255,70,60,.45); }
.pr-cardbtn.is-clear { --pr-cta-edge: #34c77b; --pr-cta-glow: rgba(52,199,123,.42); }
@keyframes prCardBtnGlow {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 12px var(--pr-cta-glow, rgba(52,199,123,.35)); }
  50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 26px var(--pr-cta-glow, rgba(52,199,123,.55)); }
}
@media (prefers-reduced-motion: reduce) { .pr-cardbtn { animation: none; } }
/* CEO 2026-07-30 EXACT-IMAGE SPEC — unclaimed trust tiles (mockup pair: clear + flagged).
   ONE shared builder (window.prUcTiles below) renders these on search, home, and any
   future surface — never fork a per-page copy (mirror-drift law). */
.pr-uc-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 12px; }
.pr-uc-tile { background: #0a101d; border: 1.5px solid rgba(148,163,184,.35); border-radius: 13px; padding: 10px 4px 9px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 98px; box-sizing: border-box; }
.pr-uc-tile.t-clear { border-color: #34c77b; box-shadow: 0 0 12px rgba(52,199,123,.45), inset 0 0 10px rgba(52,199,123,.07); }
.pr-uc-tile.t-alert { border-color: #ff463c; box-shadow: 0 0 12px rgba(255,70,60,.5), inset 0 0 10px rgba(255,70,60,.09); }
.pr-uc-tile.t-family { border-color: #ec4899; box-shadow: 0 0 12px rgba(236,72,153,.4), inset 0 0 10px rgba(236,72,153,.07); }
.pr-uc-tile .pr-uc-ic { line-height: 0; }
.pr-uc-tile.t-locked .pr-uc-ic { opacity: .55; }
.pr-uc-title { font-size: 9px; font-weight: 900; letter-spacing: .07em; color: #fff; line-height: 1.25; text-transform: uppercase; }
.pr-uc-state { font-size: 8px; font-weight: 800; letter-spacing: .08em; line-height: 1.35; text-transform: uppercase; }
.pr-uc-tile.t-clear .pr-uc-state { color: #34c77b; }
.pr-uc-tile.t-alert .pr-uc-state { color: #ff6c63; }
.pr-uc-tile.t-family .pr-uc-state { color: #f9a8d4; }
.pr-uc-tile.t-locked .pr-uc-state { color: rgba(148,163,184,.85); }
/* "separate tools" line + gold shield divider (between the tiles and the explainer) */
.pr-uc-sep { margin: 11px 2px 0; text-align: center; font-size: 10.5px; color: #3a4150; line-height: 1.55; }
.pr-uc-sep b { color: #101828; }
.pr-uc-sep .g { color: #6b7280; font-weight: 400; }
.pr-uc-sep .pr-uc-sep-ic { display: inline-block; vertical-align: -2px; line-height: 0; }
.pr-uc-rule { display: flex; align-items: center; gap: 8px; margin: 9px 6px 0; }
.pr-uc-rule i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #d9b76a, transparent); }
.pr-uc-rule span { font-size: 12px; line-height: 1; }
/* action pair — CLAIM MY PROFILE / REPORT A CONCERN (Family Experience Reviews once claimed).
   CEO 2026-07-30 (mid-build spec): WHITE background, BLACK font; claim = ORANGE border,
   report = RED border (family swap wears the locked hot-pink family color). */
.pr-uc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: #fff; border: 2px solid #cbd5e1; border-radius: 999px; padding: 11px 8px; color: #101828 !important; font-size: 10.5px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; line-height: 1.15; transition: box-shadow .15s, transform .12s; }
.pr-uc-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(10,22,40,.18); }
.pr-uc-btn.pr-uc-claim { border-color: #f59e0b; }
.pr-uc-btn.pr-uc-report { border-color: #ff463c; }
.pr-uc-btn.pr-uc-family { border-color: #ec4899; }
/* CEO 2026-07-31: the unclaimed claim button carries two lines — the ownership question + free
   claim on top, what it lets them do underneath. Full width so it never collides on mobile. */
.pr-uc-btn.pr-uc-claim { flex: 1 1 100%; padding: 10px 12px; text-transform: none; letter-spacing: 0; }
.pr-uc-claim-txt { display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.2; }
.pr-uc-claim-txt b { font-size: 11.5px; font-weight: 900; letter-spacing: .03em; text-transform: uppercase; }
.pr-uc-claim-txt i { font-style: normal; font-size: 9.2px; font-weight: 600; color: #475569; letter-spacing: .01em; }
/* ⭐ CEO 2026-07-31 CARD REDESIGN — the unclaimed summary card no longer uses the big verdict
   tiles. Big tiles read as PuppyReports AUTHORING a judgement in the first 12 seconds. These are
   DISCREET ICONS that simply light or don't: an empty file folder, not an accusation.
   RULES (locked): no counts, no descriptors, labels exactly as specified. On an UNCLAIMED card
   every icon is greyed — including the flag when there are no flags, because a GREEN flag on an
   unclaimed program would read as us clearing them. The flag is RED only when flags exist.
   On a CLAIMED card each icon lights in its own colour as that section is completed. */
/* CEO 2026-07-31: ONE tight HORIZONTAL row. grid-column:1/-1 makes the strip span the whole
   card (the search card is a 2-column grid, and without this the strip was trapped in the narrow
   photo column and stacked vertically). nowrap + flex:1 1 0 + min-width:0 keeps all nine on one line. */
/* CEO 2026-07-31: GRID with fixed equal columns — flex-wrap gave ragged, uneven rows.
   The badge is a SIBLING in .pr-uc-striprow, never absolutely positioned over the icons. */
/* CEO 2026-08-01: shared unclaimed-card chrome — WHITE container, BLACK type (CEO: tan is
   unreadable on mobile). Every surface rendering an unclaimed program uses this. */
/* CEO 2026-08-01: the contact/application gate bubble. White, black type, no tan. */
#pr-apply-bubble { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:18px; }
#pr-apply-bubble .pab-scrim { position:absolute; inset:0; background:rgba(10,22,40,.55); }
#pr-apply-bubble .pab-box { position:relative; background:#fff; color:#0a1628; border-radius:16px; padding:26px 24px 22px; max-width:400px; width:100%; box-shadow:0 24px 60px rgba(10,22,40,.35); text-align:center; }
#pr-apply-bubble .pab-x { position:absolute; top:10px; right:12px; background:none; border:none; font-size:24px; line-height:1; color:#7b8598; cursor:pointer; }
#pr-apply-bubble .pab-h { font-family:Georgia,serif; font-size:20px; font-weight:700; margin:0 0 10px; color:#0a1628; }
#pr-apply-bubble .pab-p { font-size:14px; line-height:1.6; color:#33415c; margin:0 0 18px; }
#pr-apply-bubble .pab-btn { display:block; padding:13px 18px; border-radius:999px; font-size:13.5px; font-weight:800; text-decoration:none; margin:0 0 10px; border:2px solid #0a1628; color:#0a1628; background:#fff; }
#pr-apply-bubble .pab-primary { background:#0a1628; color:#fef9e8; }
#pr-apply-bubble .pab-fine { font-size:11.5px; color:#7b8598; margin-top:4px; }
.pr-uncard { background:#fff; border:1px solid #e5ddc9; border-left:5px solid #e8940a; border-radius:10px; padding:14px 16px; color:#0a1628; }
.pr-uncard-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pr-uncard-pill { background:#e8940a; color:#fff; font-size:10px; font-weight:800; letter-spacing:1.5px; padding:4px 10px; border-radius:20px; }
.pr-uncard-id b { display:block; font-family:Georgia,serif; font-size:16.5px; font-weight:700; color:#0a1628; }
.pr-uncard-id i { display:block; font-style:normal; font-size:12px; color:#33415c; }
.pr-uc-striprow { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0 2px; grid-column: 1 / -1; width: 100%; }
.pr-uc-icons { display: grid; grid-template-columns: repeat(var(--pr-uc-cols, 9), 1fr); gap: 8px 2px; flex: 1 1 auto; min-width: 0; align-items: start; grid-column: 1 / -1; width: 100%; margin: 10px 0 2px; }
.pr-uc-striprow > .pr-uc-icons { margin: 0; width: auto; }
.pr-uc-i { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0; }
.pr-uc-i-ic { line-height: 0; opacity: .5; }
.pr-uc-i.is-on .pr-uc-i-ic { opacity: 1; }
.pr-uc-i-lb { font-size: 7.2px; font-weight: 700; line-height: 1.15; text-align: center; color: #94a3b8; letter-spacing: 0; word-break: break-word; hyphens: auto; }
/* ⛔ CEO 2026-07-31 BUG I INTRODUCED: lit labels were near-WHITE (#e9edf5) — invisible on the
   white/cream member + search cards. A lit label must be MORE readable than a grey one, never
   less. Light cards get dark navy; the dark-surface variant keeps the light label. */
.pr-uc-i.is-on .pr-uc-i-lb { color: #0f172a; font-weight: 900; }
.pr-uc-icons.pr-uc-dark .pr-uc-i.is-on .pr-uc-i-lb { color: #e9edf5; }
.pr-uc-icons.pr-uc-dark .pr-uc-i-lb { color: #94a3b8; }
/* members get a slightly larger strip; wrapping to a second row is fine */
.pr-uc-icons.pr-uc-lg { grid-template-columns: repeat(5, 1fr); gap: 10px 4px; }
.pr-uc-icons.pr-uc-lg .pr-uc-i-lb { font-size: 8px; }
.pr-uc-i-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(148,163,184,.35); }
/* CEO 2026-07-31: member cards keep the ACTIVE tier badge next to the icon strip; the dark
   verdict tiles are gone sitewide. */
/* CEO 2026-07-31: the ACTIVE member badge is a STATUS PIECE, not a tile. It moves out of the
   icon strip into the white space under the photo on the RIGHT margin, XL — at least the size of
   the QR plate (58px) so it reads as impressive rather than incidental. */
.lc-body { position: relative; }
.pr-uc-memberbadge { flex: 0 0 82px; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 82px; text-align: center; align-self: center; }
.pr-uc-memberbadge img { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 3px 10px rgba(10,22,40,.28)); }
.pr-uc-mb-t { font-size: 9.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: #a9843f; }
.pr-uc-mb-l { font-size: 8px; font-weight: 700; line-height: 1.15; color: #33415c; }
@media (max-width: 620px) { .pr-uc-memberbadge { flex-basis: 66px; width: 66px; } .pr-uc-memberbadge img { width: 58px; height: 58px; } .pr-uc-icons.pr-uc-lg { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 430px) { .pr-uc-i-lb { font-size: 5.9px; } .pr-uc-i-dot { width: 3px; height: 3px; } }
/* state-variant CTA (unclaimed card): the mockup button is text + state disc only — no logo, centered */
.pr-cardbtn.is-clear .pr-cardbtn-logo, .pr-cardbtn.is-alert .pr-cardbtn-logo { display: none; }
.pr-cardbtn.is-clear .pr-cardbtn-txt, .pr-cardbtn.is-alert .pr-cardbtn-txt { text-align: center; align-items: center; }
.pr-cardbtn.is-clear { background: linear-gradient(180deg,#07130d 0%,#0d2417 100%); }
.pr-cardbtn.is-alert { background: linear-gradient(180deg,#260a0e 0%,#3a0d12 100%); }
.pr-cardbtn.is-alert .pr-cardbtn-arrow { background: #14060a; border: 2.2px solid #ff463c; font-size: 16px; line-height: 1; }
.pr-cardbtn.is-alert .pr-cardbtn-arrow svg { display: none; }
.pr-cardbtn.is-alert .pr-cardbtn-arrow::after { content: '🚩'; }
.pr-cardbtn:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 0 30px var(--pr-cta-glow, rgba(52,199,123,.6)); }
.pr-cardbtn-logo { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; object-fit: cover; background: #07111f; }
.pr-cardbtn-txt { display: flex; flex-direction: column; line-height: 1.12; text-align: left; min-width: 0; }
.pr-cardbtn-sm { font-size: 10px; font-weight: 600; letter-spacing: 0.01em; color: rgba(254,249,232,.72); white-space: normal; line-height: 1.25; margin-top: 2px; }
.pr-cardbtn-lg { font-family: var(--pr-font-body), 'Helvetica Neue', sans-serif; font-size: 15.5px; font-weight: 900; letter-spacing: .04em; color: #fef9e8; white-space: normal; line-height: 1.15; }
.pr-cardbtn-lg sup { font-size: 8px; }
.pr-cardbtn-arrow { width: 34px; height: 34px; border-radius: 50%; margin-left: auto; background: var(--pr-cta-edge, #34c77b); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-left: 4px; }
.pr-cardbtn-arrow svg { width: 17px; height: 17px; stroke: #08131f; fill: none; stroke-width: 3.2; }
.pr-cardbtn-txt { flex: 1 1 auto; min-width: 0; }
/* CEO 2026-06-11: on mobile the round arrow overlapped the "PuppyReports Card"
   text when the button was squeezed (e.g. next to Apply in a search card).
   Make the button full-width, push the arrow to the far right, and let the
   label wrap so the arrow never collides with the text. */
@media (max-width: 560px) {
  .pr-cardbtn { width: 100%; max-width: 100%; justify-content: flex-start; box-sizing: border-box; }
  .pr-cardbtn-arrow { margin-left: auto; }
  .pr-cardbtn-lg { white-space: normal; line-height: 1.1; }
}

/* ===== CEO 2026-09-25: MOBILE MENU ROW + MEMBERSHIPS SHEET (every top-menu item reachable on phones; Memberships gold) ===== */
.pr-mnav { display:none; background:var(--navy-rich); padding:5px 10px 7px; border-bottom:1px solid rgba(200,168,78,.22); position:relative; z-index:5;
  justify-content:center; gap:8px; }
@media (max-width:1340px){ .pr-mnav { display:flex; } }
/* same chip as .site-nav-chip (Howls / Radio / Parks): white, 50px tall, 13px radius, 24px icon slot, 9px/800 label inside */
.pr-mchip { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; height:50px; min-width:54px; padding:0 7px;
  box-sizing:border-box; border-radius:13px; background:#fff; border:1px solid #e3e5e9; box-shadow:0 1px 5px rgba(0,0,0,.25);
  color:#20242c; text-decoration:none; cursor:pointer; font:inherit; -webkit-tap-highlight-color:transparent; }
.pr-mchip-ico { display:flex; align-items:center; justify-content:center; height:24px; }
.pr-mchip-ico svg { width:21px; height:21px; }
.pr-mchip-lbl { font-family:system-ui,-apple-system,"Segoe UI",sans-serif; font-size:9px; font-weight:800; line-height:1.1; white-space:nowrap; color:inherit; }
.pr-mchip:hover { border-color:#d9b76a; }
.pr-mchip-mem { background:linear-gradient(180deg,#e2bd66 0%,#c9a044 55%,#b08a31 100%); border-color:#b98d2c; color:#1a1408; box-shadow:0 2px 10px rgba(200,168,78,.5); }
.pr-mchip-rec .pr-mchip-ico { color:#c39a3e; } .pr-mchip-rec .pr-mchip-lbl { color:#8a6d24; }
.pr-mchip-flag .pr-mchip-ico, .pr-mchip-flag .pr-mchip-lbl { color:#dc2626; }
@media (max-width:360px){ .pr-mnav { gap:5px; padding:5px 6px 7px; } .pr-mchip { padding:0 5px; min-width:48px; } }
.pr-sh-grp { margin:16px 0 8px; font:800 11px/1 var(--pr-font-body,'DM Sans',sans-serif); letter-spacing:.16em; text-transform:uppercase; color:#9c7e34; display:flex; align-items:center; gap:10px; }
.pr-sh-grp::after { content:''; flex:1; height:1px; background:#e6dfd0; }
/* desktop row matches: gold Memberships chip, white Tools chip, Recommend / File a Flag pills */
.site-nav-link.pr-nav-mem svg, .site-nav-link.pr-nav-tools svg, .site-nav-link.pr-nav-pill svg { width:15px; height:15px; margin-right:5px; vertical-align:-3px; }
.site-nav-link.pr-nav-tools { background:#fff; color:#0a1628 !important; border:1px solid #e4dccb; border-radius:999px; padding:7px 13px; font-weight:800; box-shadow:0 1px 5px rgba(0,0,0,.25); }
.site-nav-link.pr-nav-tools:hover { background:#fff8ea; }
.site-nav-link.pr-nav-pill { background:#fff; border-radius:999px; padding:6px 12px; font-weight:800; box-shadow:0 1px 4px rgba(0,0,0,.22); }
.site-nav-link.pr-nav-rec { color:#8a6d24 !important; border:1px solid #d9b25a; } .site-nav-link.pr-nav-rec svg { color:#c39a3e; }
.site-nav-link.pr-nav-flag { color:#c81e3f !important; border:1px solid #f1b4c0; } .site-nav-link.pr-nav-flag svg { color:#e11d48; }
.site-nav-link.pr-nav-pill:hover, .site-nav-link.pr-nav-tools:hover { background:#fff8ea; }
/* desktop: Memberships is a gold button that opens the sheet; its old hover list stays in the DOM (rescue shell swap) but never shows */
.site-nav-link.pr-nav-mem { background:linear-gradient(180deg,#d9b25a,#b98d2c); color:#fff !important; border-radius:999px; padding:7px 13px; font-weight:800;
  box-shadow:0 2px 10px rgba(200,168,78,.45); }
.site-nav-link.pr-nav-mem:hover { filter:brightness(1.06); background:linear-gradient(180deg,#e2bd66,#c0932f); }
.nav-dropdown.pr-mem-dd .nav-dropdown-menu { display:none !important; }
/* CEO 2026-09-27 (img 97 "membership button is dead"): the ≤1340px accordion rule (.nav-dropdown > .site-nav-link
   pointer-events:none) turned this header into a label, but Memberships has no accordion list — it opens the sheet. */
.nav-dropdown.pr-mem-dd > .site-nav-link.pr-nav-mem { pointer-events:auto !important; cursor:pointer; }
/* the sheet: bottom sheet on phones, centered panel on desktop */
.pr-sheet-bg { position:fixed; inset:0; background:rgba(5,9,18,.55); z-index:3000; opacity:0; transition:opacity .2s; }
.pr-sheet-bg.on { opacity:1; }
.pr-sheet { position:fixed; left:0; right:0; bottom:0; z-index:3001; max-height:88vh; overflow:auto; -webkit-overflow-scrolling:touch;
  background:#fdfbf7; border-radius:24px 24px 0 0; padding:10px 18px 26px; box-shadow:0 -12px 40px rgba(0,0,0,.35);
  transform:translateY(102%); transition:transform .22s ease; color:#0a1628; }
.pr-sheet.on { transform:none; }
html.pr-sheet-on, html.pr-sheet-on body { overflow:hidden; }
@media (min-width:761px){
  .pr-sheet { left:50%; right:auto; bottom:auto; top:50%; width:min(640px,92vw); max-height:86vh; border-radius:24px; padding:18px 28px 26px;
    transform:translate(-50%,-46%) scale(.97); opacity:0; transition:transform .2s ease, opacity .2s; }
  .pr-sheet.on { transform:translate(-50%,-50%); opacity:1; }
  .pr-sheet-grab { display:none; }
}
.pr-sheet-grab { width:46px; height:5px; border-radius:9px; background:#d9d3c6; margin:0 auto 6px; }
/* the close X stays pinned to the top of the sheet while it scrolls (CEO 9/25: 'can't x out' once scrolled) */
.pr-sheet-xbar { position:sticky; top:0; height:0; z-index:5; }
.pr-sheet-x { position:absolute; top:2px; right:-4px; width:42px; height:42px; border:1px solid #e4ddcf; border-radius:50%; background:#fff; box-shadow:0 3px 12px rgba(10,22,40,.18); font-size:30px; line-height:38px; padding:0; text-align:center; color:#0a1628; cursor:pointer; }
.pr-sheet h2 { font-family:var(--pr-font-display,'DM Serif Display',Georgia,serif); font-weight:400; font-size:32px; line-height:1.1; margin:8px 44px 2px 0; color:#0a1628; }
.pr-sh-lede { margin:0 0 14px; color:#5b6473; font-size:15px; }
.pr-sh-sec { margin:14px 0 6px; }
.pr-sh-h { display:flex; align-items:center; gap:10px; }
.pr-sh-h h3 { font-family:var(--pr-font-display,'DM Serif Display',Georgia,serif); font-weight:400; font-size:23px; margin:0; color:#0a1628; white-space:nowrap; }
.pr-sh-h::after { content:''; flex:1; height:1px; background:#e6dfd0; margin-left:6px; }
.pr-sh-hi { width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; }
.pr-sh-hi svg { width:28px; height:28px; }
.pr-sh-hs { margin:2px 0 10px 40px; font-size:13px; color:#5b6473; }
.pr-sh-it { display:flex; align-items:center; gap:14px; padding:12px 14px; margin:0 0 9px; background:#fff; border:1px solid #ece5d6; border-radius:16px;
  text-decoration:none; color:#0a1628; box-shadow:0 2px 8px rgba(10,22,40,.05); transition:transform .12s, box-shadow .12s, border-color .12s; }
.pr-sh-it:hover { transform:translateY(-1px); border-color:#d9b25a; box-shadow:0 6px 16px rgba(10,22,40,.10); }
.pr-sh-it > svg { width:18px; height:18px; flex:none; color:#6b7280; margin-left:auto; }
.pr-sh-ic { flex:none; width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.pr-sh-ic svg { width:24px; height:24px; }
/* CEO 2026-09-27 (img 100): menu items use their brand art, like Howls Weather / Radio */
.pr-sh-ic.pr-sh-art { overflow:hidden; background:#0a1628; box-shadow:0 0 0 1.5px rgba(216,170,78,.7); border-radius:14px; }
.pr-sh-ic.pr-sh-art img { width:100%; height:100%; object-fit:contain; display:block; }
.pr-sh-tx { display:flex; flex-direction:column; gap:3px; min-width:0; }
.pr-sh-tx b { font-family:var(--pr-font-display,'DM Serif Display',Georgia,serif); font-weight:400; font-size:17.5px; line-height:1.2; }
.pr-sh-tx small { font-size:13px; color:#5b6473; line-height:1.3; }
.pr-sh-ic.g, .pr-sh-hi.g { color:#b98d2c; } .pr-sh-ic.g { background:#f6eedd; }
.pr-sh-ic.n, .pr-sh-hi.n { color:#1f3a5f; } .pr-sh-ic.n { background:#e9eef6; }
.pr-sh-ic.r, .pr-sh-hi.r { color:#c0395a; } .pr-sh-ic.r { background:#fbe9ed; }
.pr-sh-ic.t, .pr-sh-hi.t { color:#0f766e; } .pr-sh-ic.t { background:#e3f4f1; }
.pr-sh-foot { margin:12px 0 0; text-align:center; font-size:12.5px; font-weight:700; color:#9c7e34; }