/* =========================================================
   The Well Canine — Canine Wellness Affiliate Site
   Clean, modern, Pinterest-friendly design system
   Brand palette: Blush / Rose / Linen / Warm Sand / Driftwood /
   Dark Espresso / Sage / Mist

   FILE MAP (search these comments to jump to a section):
   1.  Brand fonts / :root variables
   2.  Base reset & section shells
   3.  Buttons (.btn, .shop-button)
   4.  Announcement bar
   5.  Header / nav
   6.  Hero
   7.  Trust strip
   8.  Masonry / Pinterest product grid
   9.  Product detail ("Deep Dive") sections
   10. Meet the Real Critics
   11. Guide / email capture
   12. About
   13. Footer
   14. Back to top / toast
   15. Legal pages (Privacy Policy / Terms & Conditions)
   16. Responsive media queries
   ========================================================= */

/* ---------------------------------------------------------
   1. Brand fonts
   - Caviar Dreams is used ONLY for the logo wordmark ("The Well
     Canine" next to the hand-drawn dog mark, header + footer).
     It isn't on Google Fonts, so it's loaded via cdnfonts.com in
     each HTML file's <head>; "Quicksand" is the fallback if
     that third-party CDN is ever slow/unreachable.
   - Raleway is used for everything else on the site: all headings
     (h1–h4), body copy, buttons, nav links, etc.

   Prefer self-hosting Caviar Dreams instead of the CDN? Add the
   licensed font files to a new /fonts/ folder and re-add an
   @font-face block here pointing to them (e.g.
   url("fonts/CaviarDreams.woff2")) — that takes precedence over
   the CDN version automatically and removes the external dependency.
   --------------------------------------------------------- */

:root{
  --color-bg: #F5EFE6;           /* Linen — page background */
  --color-surface: #FFFFFF;      /* card / form surfaces */
  --color-ink: #2E2118;          /* Dark Espresso — headlines, body text */
  --color-ink-soft: #5C4C3B;     /* Driftwood, darkened for text-only use —
                                     ~7.2:1 contrast on Linen background
                                     (was #7D6A55, ~4.5:1, borderline AA).
                                     Note: --color-secondary below keeps the
                                     original #7D6A55 for buttons/tags/the
                                     trust-strip background, which are
                                     unaffected by this change. */
  --color-primary: #CB516B;      /* Rose — accents, CTAs, links */
  --color-primary-dark: #A24156; /* Rose, darkened for hover */
  --color-secondary: #7D6A55;    /* Driftwood — secondary buttons/tags */
  --color-secondary-light: #D4DECE; /* Mist — light sage backgrounds */
  --color-accent: #C4B49A;       /* Warm Sand — borders, dividers, stars */
  --color-sage: #9AAB8E;         /* Sage — nature nods, callout blocks */
  --color-blush: #FFD0D6;        /* Blush — soft highlight backgrounds */
  --color-blush-tint: #FFF2F4;   /* pale Blush wash for section tags */
  --color-line: #E9E0D0;         /* Warm Sand-based subtle divider */
  --color-cream: #FBF6EC;        /* Linen tint for image placeholders */
  --color-amazon: #14213D;       /* Amazon brand navy — CTA only, unrelated to site palette */

  --font-logo: "Caviar Dreams", "Quicksand", -apple-system, sans-serif; /* logo wordmark only */
  --font-body: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* everything else */

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(35,38,31,0.06);
  --shadow-md: 0 12px 30px rgba(35,38,31,0.10);
  --shadow-lg: 0 24px 60px rgba(35,38,31,0.16);

  --container: 1240px;
  --header-h: 76px;
}

/* ---------------------------------------------------------
   2. Base reset & section shells
   --------------------------------------------------------- */
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4{
  font-family: var(--font-body);
  line-height: 1.2;
  margin: 0;
  font-weight: 700;
  letter-spacing: 0;
}
p{ margin: 0; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

main > section{
  padding: 96px 24px;
  max-width: var(--container);
  margin: 0 auto;
}
.section-head{
  max-width: 680px;
  margin: 0 auto 56px;
  text-align: center;
}
.section-tag{
  display: inline-block;
  color: var(--color-primary-dark);
  background: var(--color-blush-tint);
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.section-head h2{
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  margin-bottom: 14px;
  color: var(--color-ink);
}
.section-head p{
  color: var(--color-ink-soft);
  font-size: 1.05rem;
  line-height: 1.6;
}

/* ---------------------------------------------------------
   3. Buttons
   --------------------------------------------------------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.98rem;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn:active{ transform: scale(0.97); }
.btn i{
  /* Font Awesome glyphs (e.g. the bone vs. open-book icon) don't fill their
     character box equally, so at the same font-size some icons render
     visually smaller than others. Locking icons to a fixed width/height
     box keeps every button icon reading as the same size. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1em;
  height: 1.1em;
  font-size: 1.05em;
  flex-shrink: 0;
}
.btn-primary{
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 10px 24px rgba(232,115,74,0.35);
}
.btn-primary:hover{
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(232,115,74,0.4);
}
.btn-outline{
  background: transparent;
  border-color: var(--color-ink);
  color: var(--color-ink);
}
.btn-outline:hover{
  background: var(--color-ink);
  color: #fff;
  transform: translateY(-2px);
}
.btn-secondary{
  background: var(--color-secondary-light);
  color: var(--color-secondary);
}
.btn-secondary:hover{
  background: var(--color-secondary);
  color: #fff;
}
.btn-lg{ padding: 17px 34px; font-size: 1.05rem; }
.btn-sm{ padding: 10px 20px; font-size: 0.88rem; }
.btn-block{ width: 100%; }

/* .shop-button — dedicated Amazon affiliate CTA class (all 24 "Shop on
   Amazon" links). Standalone class (not paired with .btn) so it carries
   its own full button styling, styled to match the site's former
   .btn.btn-amazon look 1:1 for visual continuity. */
.shop-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.98rem;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  background: var(--color-amazon);
  color: #fff;
  box-shadow: 0 10px 24px rgba(20,33,61,0.3);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.shop-button:hover{
  background: #0a1428;
  transform: translateY(-2px);
}
.shop-button:active{ transform: scale(0.97); }
.shop-button i{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1em;
  height: 1.1em;
  font-size: 1.05em;
  flex-shrink: 0;
}

/* ---------------------------------------------------------
   4. Announcement bar
   --------------------------------------------------------- */
.announcement-bar{
  background: var(--color-ink);
  color: #fff;
  text-align: center;
  font-size: 0.86rem;
  padding: 10px 16px;
}
.announcement-bar a{
  text-decoration: underline;
  font-weight: 700;
  color: var(--color-blush);
}

/* ---------------------------------------------------------
   5. Header / nav
   --------------------------------------------------------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(255,251,247,0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-line);
}
.header-inner{
  max-width: var(--container);
  margin: 0 auto;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  gap: 24px;
}
.logo{
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-logo);
  font-size: 1.32rem;
  font-weight: 700;
  color: var(--color-ink); /* header default: Dark Espresso, unchanged */
  flex-shrink: 0;
  white-space: nowrap;
}
.logo em{
  color: var(--color-primary); /* Rose — "Well" stays as-is everywhere */
  font-style: normal;
}
/* Footer-only override: "The" and "Canine" in Warm Sand against the dark
   espresso footer background. Scoped to .logo-footer so the header logo
   (on the Linen background) is completely untouched. */
.logo-footer{
  color: var(--color-accent); /* Warm Sand */
}
.logo-icon{
  display: inline-block;
  width: auto;
  flex-shrink: 0;
  /* Both header and footer icons use the transparent PNG purely as a CLIP
     MASK (only the non-transparent line-art shape shows), filled with a
     solid brand color via background-color. This gives a bold, consistent
     silhouette on both backgrounds instead of the original multi-tone line
     art, which read as faint/thin against Linen. */
  -webkit-mask-image: url("images/logo-cavalier-transparent.png");
  mask-image: url("images/logo-cavalier-transparent.png");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.logo-icon-header{
  height: 46px;
  width: 58px; /* matches the source PNG's aspect ratio at this height */
  background-color: var(--color-ink); /* Dark Espresso — bold against Linen header */
}
.logo-icon-footer{
  height: 58px;
  width: 74px; /* matches the source PNG's aspect ratio at this height */
  background-color: var(--color-bg); /* Linen — bold against Espresso footer */
}
.main-nav{
  display: flex;
  align-items: center;
  gap: 32px;
  font-weight: 600;
  font-size: 0.96rem;
}
.main-nav a{
  color: var(--color-ink-soft);
  position: relative;
  padding: 6px 0;
  transition: color .2s ease;
}
.main-nav a:hover{ color: var(--color-primary); }
.header-actions{
  display: flex;
  align-items: center;
  gap: 14px;
}
.nav-toggle{
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px; height: 42px;
  border-radius: 10px;
  border: 1px solid var(--color-line);
  background: #fff;
  cursor: pointer;
}
.nav-toggle span{
  width: 20px; height: 2px;
  background: var(--color-ink);
  margin: 0 auto;
  transition: .2s ease;
}

/* ---------------------------------------------------------
   6. Hero
   --------------------------------------------------------- */
.hero{
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding: 0 24px;
  max-width: none;
  overflow: hidden;
}
.hero-media{
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-media img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.hero-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(46,33,24,0.80) 0%, rgba(46,33,24,0.56) 42%, rgba(46,33,24,0.15) 75%);
}
.hero-content{
  position: relative;
  z-index: 1;
  max-width: 680px;
  color: #fff;
  padding: 140px 0 90px;
  margin: 0 auto;
  width: 100%;
  max-width: var(--container);
}
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.3);
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-bottom: 24px;
  backdrop-filter: blur(4px);
}
.hero h1{
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  color: #fff;
  margin-bottom: 22px;
  max-width: 640px;
}
.hero-sub{
  font-size: 1.15rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.88);
  max-width: 560px;
  margin-bottom: 34px;
  /* Guards legibility over brighter/sunlit patches of the background photo,
     independent of the dark gradient overlay. */
  text-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
.hero-cta-group{
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.hero-cta-group .btn{
  /* "Shop Our Picks" and "Get the Free Guide" are different lengths, so
     left to size-to-content they end up visibly different widths.
     min-width alone isn't enough — it's only a floor, and the longer
     label still grows past it — so use a shared fixed width (sized to
     comfortably fit the longer label) so both buttons truly match. */
  flex: 0 0 auto;
  width: 262px;
}
.hero .btn-primary{
  /* The outline button's visible white border gives it a crisp, defined
     edge, while the solid-fill button's soft drop-shadow blurs its edge —
     so even at an identical box size, the solid button reads as smaller
     next to the crisper outline button. A subtle matching border restores
     the same edge definition/visual weight on both buttons. */
  border-color: rgba(255,255,255,0.35);
}
.hero .btn-outline{
  border-color: rgba(255,255,255,0.7);
  color: #fff;
}
.hero .btn-outline:hover{
  background: #fff;
  color: var(--color-ink);
}
.hero-trust{
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  font-size: 0.92rem;
  font-weight: 600;
  /* Same reasoning as .hero-sub — keeps the white checklist text readable
     where it overlaps lighter parts of the dog photo. */
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.hero-trust li{ display: flex; align-items: center; gap: 8px; }
.hero-trust i{ color: var(--color-accent); }
.scroll-cue{
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  color: #fff;
  width: 44px; height: 44px;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 50%;
  display: grid;
  place-items: center;
  animation: bounce 2.2s infinite;
}
@keyframes bounce{
  0%,100%{ transform: translate(-50%,0); }
  50%{ transform: translate(-50%,8px); }
}

/* ---------------------------------------------------------
   7. Trust strip
   --------------------------------------------------------- */
.trust-strip{
  background: var(--color-secondary);
  padding: 0;
  max-width: none;
}
.trust-strip-inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 28px 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  justify-items: center;
}
.trust-item{
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-size: 0.92rem;
  font-weight: 600;
  justify-content: center;
  text-align: center;
}
.trust-item i{
  color: var(--color-accent);
  font-size: 1.2rem;
  flex-shrink: 0;
}

/* ---------------------------------------------------------
   8. Masonry / Pinterest product grid
   Uses real CSS Grid (strict rows/columns) rather than CSS multi-column.
   Multi-column masonry balances column HEIGHTS, which — whenever card
   heights vary slightly (different badge/description lengths, as here) —
   can shuffle the last card(s) in a row into a misaligned spot instead of
   lining up cleanly under the card to their left. Grid keeps every card
   locked to its row/column, so all 4 (or fewer, on smaller screens) cards
   per row stay perfectly aligned, at the small cost of equal-height rows.
   --------------------------------------------------------- */
.shop-section{ padding-top: 96px; }
.masonry-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.pin-card{
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
  border: 1px solid var(--color-line);
  animation: fadeUp .5s ease both;
}
/* Per-card stagger delay, by grid position — replaces the old inline
   style="--i:N" custom property so no inline styles remain in the HTML.
   Card 1 = 0s, each subsequent card +0.05s, up to card 24. */
.masonry-grid .pin-card:nth-child(1){ animation-delay: 0s; }
.masonry-grid .pin-card:nth-child(2){ animation-delay: 0.05s; }
.masonry-grid .pin-card:nth-child(3){ animation-delay: 0.1s; }
.masonry-grid .pin-card:nth-child(4){ animation-delay: 0.15s; }
.masonry-grid .pin-card:nth-child(5){ animation-delay: 0.2s; }
.masonry-grid .pin-card:nth-child(6){ animation-delay: 0.25s; }
.masonry-grid .pin-card:nth-child(7){ animation-delay: 0.3s; }
.masonry-grid .pin-card:nth-child(8){ animation-delay: 0.35s; }
.masonry-grid .pin-card:nth-child(9){ animation-delay: 0.4s; }
.masonry-grid .pin-card:nth-child(10){ animation-delay: 0.45s; }
.masonry-grid .pin-card:nth-child(11){ animation-delay: 0.5s; }
.masonry-grid .pin-card:nth-child(12){ animation-delay: 0.55s; }
.masonry-grid .pin-card:nth-child(13){ animation-delay: 0.6s; }
.masonry-grid .pin-card:nth-child(14){ animation-delay: 0.65s; }
.masonry-grid .pin-card:nth-child(15){ animation-delay: 0.7s; }
.masonry-grid .pin-card:nth-child(16){ animation-delay: 0.75s; }
.masonry-grid .pin-card:nth-child(17){ animation-delay: 0.8s; }
.masonry-grid .pin-card:nth-child(18){ animation-delay: 0.85s; }
.masonry-grid .pin-card:nth-child(19){ animation-delay: 0.9s; }
.masonry-grid .pin-card:nth-child(20){ animation-delay: 0.95s; }
.masonry-grid .pin-card:nth-child(21){ animation-delay: 1s; }
.masonry-grid .pin-card:nth-child(22){ animation-delay: 1.05s; }
.masonry-grid .pin-card:nth-child(23){ animation-delay: 1.1s; }
.masonry-grid .pin-card:nth-child(24){ animation-delay: 1.15s; }
@keyframes fadeUp{
  from{ opacity: 0; transform: translateY(16px); }
  to{ opacity: 1; transform: translateY(0); }
}
.pin-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.pin-media{
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--color-cream);
}
.pin-media img{
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
  transition: transform .5s ease;
}
/* Applied to product photos that are non-square / have tight margins
   (e.g. tall packaging shots) so the full image shows on a white
   background instead of being cropped by the default square, cover-fit
   frame above. Replaces the old inline
   style="object-fit: contain; background: #fff;" overrides. */
.pin-media img.product-image-contain{
  object-fit: contain;
  background: #fff;
}
.pin-card:hover .pin-media img{ transform: scale(1.06); }
.pin-badge{
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.02em;
  box-shadow: var(--shadow-sm);
}
.pin-save{
  position: absolute;
  top: 14px;
  right: 14px;
  background: #fff;
  color: var(--color-ink);
  border: none;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
  box-shadow: var(--shadow-sm);
}
.pin-card:hover .pin-save{ opacity: 1; transform: translateY(0); }
.pin-save:hover{ background: #E60023; color: #fff; }
.pin-save i{ font-size: 0.9rem; }
.pin-body{
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.pin-category{
  display: inline-block;
  color: var(--color-secondary);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.pin-body h3{ font-size: 1.15rem; margin-bottom: 8px; }
.pin-body h3 a{ transition: color .2s ease; }
.pin-body h3 a:hover{ color: var(--color-primary); }
.pin-reason{
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-primary);
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 10px;
}
.pin-reason i{
  color: var(--color-secondary);
  font-size: 0.8rem;
  flex-shrink: 0;
}
.pin-body p{
  color: var(--color-ink-soft);
  font-size: 0.92rem;
  line-height: 1.55;
  margin-bottom: 16px;
  flex: 1; /* absorbs leftover vertical space so the "See Why We Love It"
              button lines up at the same height across every card in a row,
              regardless of description length */
}

/* ---------------------------------------------------------
   9. Product detail ("Deep Dive") sections
   --------------------------------------------------------- */
.products-detail{ padding-top: 40px; }
.product-feature{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 56px 0;
  border-bottom: 1px solid var(--color-line);
}
.product-feature:last-child{ border-bottom: none; }
.product-feature-media img{
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  aspect-ratio: 4/3;
  object-fit: cover;
  width: 100%;
}
/* Same non-square/tight-margin photo treatment as .pin-media img above,
   for the larger Deep Dive product photo. */
.product-feature-media img.product-image-contain{
  object-fit: contain;
  background: #fff;
}
.product-feature-copy h3{
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  margin-bottom: 12px;
}
.product-feature-copy > p{
  color: var(--color-ink-soft);
  line-height: 1.7;
  margin: 16px 0 20px;
  font-size: 1rem;
}
.benefit-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
  background: var(--color-secondary-light);
  border: 1px solid var(--color-sage);
  border-radius: var(--radius-md);
  padding: 20px 22px;
}
.benefit-list li{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 600;
  font-size: 0.96rem;
}
.benefit-list i{ color: var(--color-sage); margin-top: 2px; }
.product-cta-row{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.affiliate-note{
  font-size: 0.78rem;
  color: var(--color-ink-soft);
  /* opacity: 0.8 previously dropped contrast against the Linen background
     to ~3.1:1 (fails WCAG AA's 4.5:1 minimum for this font size). Full
     opacity on the same Driftwood color reads ~5.2:1, comfortably passing,
     with no visible change to the brand palette. */
}

/* ---------------------------------------------------------
   10. Meet the Real Critics
   --------------------------------------------------------- */
.critics-section{ background: var(--color-blush-tint); max-width: none; padding: 96px 24px; }
.critics-section .section-head, .critic-grid{ max-width: var(--container); margin: 0 auto; }
.critic-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}
.critic-card{
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  margin: 0;
  text-align: center;
}
.critic-card img{
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 18px;
  display: block;
  box-shadow: var(--shadow-sm);
  border: 3px solid var(--color-surface);
}
/* Some source photos (e.g. Tali's) are square with the subject's ears/head
   reaching the frame edges, so a plain circular crop clips them. .critic-photo
   wraps the image in a fixed circular frame and scales the photo down inside
   it (zoomed out, not cropped tighter) so the whole subject stays visible. */
.critic-card .critic-photo{
  width: 140px;
  height: 140px;
  border-radius: 50%;
  margin: 0 auto 18px;
  box-shadow: var(--shadow-sm);
  border: 3px solid var(--color-surface);
  /* Matches the light concrete-sidewalk background in Tali's source photo,
     so the thin margin left by the zoom-out below reads as part of her
     photo's own background rather than a mismatched ring. */
  background: #DCD9D1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.critic-card .critic-photo-zoomed{
  width: 98%;
  height: 98%;
  margin: 0;
  border: none;
  box-shadow: none;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 42%;
}
.critic-card h3{
  font-size: 1.15rem;
  margin-bottom: 10px;
  color: var(--color-ink);
}
.critic-title{
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  margin-top: 4px;
}
.critic-card p{
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--color-ink-soft);
  margin: 0;
}

/* ---------------------------------------------------------
   11. Guide / Email capture
   --------------------------------------------------------- */
.guide-section{
  position: relative;
  max-width: none;
  padding: 0;
  min-height: 560px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.guide-media, .guide-overlay{ position: absolute; inset: 0; z-index: 0; }
.guide-media img{ width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.guide-overlay{
  background: linear-gradient(120deg, rgba(125,106,85,0.94) 0%, rgba(125,106,85,0.88) 45%, rgba(46,33,24,0.62) 100%);
}
.guide-content{
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0 auto;
  padding: 90px 24px;
  color: #fff;
  text-align: center;
}
.eyebrow-light{
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.35);
  color: #fff;
}
.guide-content h2{
  color: #fff;
  font-size: clamp(2rem, 3.4vw, 2.7rem);
  margin: 20px 0 14px;
}
.guide-content > p{
  color: rgba(255,255,255,0.9);
  font-size: 1.08rem;
  line-height: 1.6;
  margin-bottom: 36px;
}
.guide-form{ width: 100%; }
.form-row{
  display: flex;
  gap: 12px;
  background: #fff;
  padding: 8px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
}
.form-field{ flex: 1; min-width: 0; }
.form-field input{
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  padding: 12px 18px;
  font-size: 0.98rem;
  font-family: var(--font-body);
  color: var(--color-ink);
}
.form-field input::placeholder{ color: #9AA098; }
.guide-form .btn{ flex-shrink: 0; }
.form-note{
  margin-top: 18px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.form-message{
  margin-top: 14px;
  font-weight: 700;
  font-size: 0.95rem;
  min-height: 1.2em;
}
.form-message.success{ color: var(--color-accent); }
.form-message.error{ color: #FFB4A8; }

/* ---------------------------------------------------------
   12. About
   --------------------------------------------------------- */
.about-section{
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: center;
}
.about-media img{
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  aspect-ratio: 4/5;
  object-fit: cover;
  width: 100%;
}
.about-copy h2{
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin: 16px 0 18px;
}
.about-copy > p{
  color: var(--color-ink-soft);
  line-height: 1.7;
  margin-bottom: 24px;
}
.about-points{ display: flex; flex-direction: column; gap: 14px; margin-bottom: 30px; }
.about-points li{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-weight: 600;
}
.about-points i{ color: var(--color-sage); margin-top: 3px; }

/* ---------------------------------------------------------
   13. Footer
   --------------------------------------------------------- */
.site-footer{
  background: var(--color-ink);
  color: #E9E2D6;
  max-width: none;
  padding: 0;
}
.footer-top{
  max-width: var(--container);
  margin: 0 auto;
  padding: 72px 24px 48px;
  display: grid;
  grid-template-columns: 1.1fr 2fr;
  gap: 60px;
}
.footer-brand p{ color: #C9BEA9; line-height: 1.6; margin: 18px 0 22px; max-width: 320px; }
.logo-footer{ color: #fff; }
.footer-social{ display: flex; gap: 12px; }
.footer-social a{
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: grid;
  place-items: center;
  transition: background .2s ease, color .2s ease;
}
.footer-social a:hover{ background: var(--color-primary); color: #fff; }
.footer-links{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.footer-col h4{
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 18px;
}
.footer-col a{
  display: block;
  color: #C9BEA9;
  margin-bottom: 12px;
  font-size: 0.94rem;
  transition: color .2s ease;
}
.footer-col a:hover{ color: #fff; }
.footer-mini-copy{ color: #C9BEA9; font-size: 0.9rem; margin-bottom: 16px; line-height: 1.5; }
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,0.08);
  max-width: var(--container);
  margin: 0 auto;
  padding: 26px 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 0.82rem;
  /* Lightened from #9C9081 (~5.0:1, barely-passing AA) to #B0A493
     (~6.4:1) for extra headroom on the vet disclaimer paragraph. */
  color: #B0A493;
}
.disclosure{ line-height: 1.6; max-width: 900px; }
.footer-legal-links{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.footer-legal-links a{
  color: #B0A493;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .2s ease;
}
.footer-legal-links a:hover{ color: #fff; }
.footer-legal-divider{ color: #6B5F51; }

/* ---------------------------------------------------------
   14. Back to top / toast
   --------------------------------------------------------- */
.back-to-top{
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  border: none;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  z-index: 400;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
}
.back-to-top.visible{ opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-to-top:hover{ background: var(--color-primary-dark); }

.pin-toast{
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--color-ink);
  color: #fff;
  padding: 14px 24px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: var(--shadow-lg);
  z-index: 600;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pin-toast.visible{ opacity: 1; transform: translateX(-50%) translateY(0); }
.pin-toast i{ color: #E60023; }

/* ---------------------------------------------------------
   15. Legal pages (Privacy Policy / Terms & Conditions)
   Merged here from what used to be identical inline <style> blocks
   duplicated in privacy-policy.html and terms-and-conditions.html.
   --------------------------------------------------------- */
.legal-page{ max-width: 820px; margin: 0 auto; padding: 64px 24px 96px; }
.legal-page .eyebrow{ margin-bottom: 20px; background: var(--color-blush-tint); border: none; color: var(--color-primary-dark); }
.legal-page h1{ font-size: clamp(2rem, 3.6vw, 2.6rem); margin-bottom: 10px; color: var(--color-ink); }
.legal-updated{ color: var(--color-ink-soft); font-size: 0.92rem; margin-bottom: 40px; }
.legal-page h2{ font-size: 1.3rem; margin: 40px 0 14px; color: var(--color-ink); }
.legal-page p{ color: var(--color-ink-soft); line-height: 1.75; margin-bottom: 16px; }
.legal-page ul{ margin: 0 0 16px; padding-left: 22px; list-style: disc; }
.legal-page li{ color: var(--color-ink-soft); line-height: 1.75; margin-bottom: 8px; }
.legal-page a{ color: var(--color-primary); text-decoration: underline; }
.legal-back{ display: inline-flex; align-items: center; gap: 8px; margin-bottom: 32px; font-weight: 600; color: var(--color-ink); }
.legal-back:hover{ color: var(--color-primary); }

/* Numbered-section layout used by the finalized Privacy Policy / Terms &
   Conditions content (each major section prefixed with a "01", "02"...
   number badge instead of running straight from one <h2> to the next). */
.legal-section{ padding: 28px 0; border-bottom: 1px solid var(--color-line); }
.legal-section:first-of-type{ padding-top: 0; }
.legal-section:last-of-type{ border-bottom: none; }
.legal-section-number{
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-primary-dark);
  background: var(--color-blush-tint);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: 14px;
}
.legal-section h2{ margin: 0 0 14px; }
/* Term/description pairs (e.g. "Right to Access", "Entire Agreement") */
.legal-terms{ margin: 0 0 16px; }
.legal-terms dt{ font-weight: 700; color: var(--color-ink); margin-top: 14px; }
.legal-terms dt:first-of-type{ margin-top: 0; }
.legal-terms dd{ margin: 4px 0 0; padding: 0; color: var(--color-ink-soft); line-height: 1.75; }

/* =========================================================
   16. RESPONSIVE
   ========================================================= */
@media (max-width: 1100px){
  .masonry-grid{ grid-template-columns: repeat(3, 1fr); }
  .footer-links{ grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

@media (max-width: 900px){
  main > section{ padding: 72px 20px; }
  .trust-strip-inner{ grid-template-columns: repeat(2, 1fr); }
  .masonry-grid{ grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .product-feature{ grid-template-columns: 1fr; gap: 28px; padding: 40px 0; }
  .critic-grid{ grid-template-columns: 1fr; }
  .about-section{ grid-template-columns: 1fr; }
  .about-media{ max-width: 420px; margin: 0 auto; }
  .footer-top{ grid-template-columns: 1fr; gap: 40px; }
  .footer-links{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 720px){
  .main-nav{
    position: absolute;
    top: var(--header-h);
    left: 0; right: 0;
    background: #fff;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 16px 24px 24px;
    border-bottom: 1px solid var(--color-line);
    box-shadow: var(--shadow-md);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  }
  .main-nav.open{
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  .main-nav a{ width: 100%; padding: 12px 0; border-bottom: 1px solid var(--color-line); }
  .main-nav a:last-child{ border-bottom: none; }
  .nav-toggle{ display: flex; }
  .header-actions .btn-sm.btn-primary{ display: none; }

  .hero{ min-height: 100vh; }
  .hero-content{ padding: 120px 4px 70px; }
  .hero-cta-group{ flex-direction: column; align-items: stretch; }
  .hero-cta-group .btn{ width: 100%; }
  .hero-trust{ gap: 14px 20px; }

  .trust-strip-inner{ grid-template-columns: 1fr; }

  .masonry-grid{ grid-template-columns: 1fr; }

  .form-row{
    flex-direction: column;
    border-radius: var(--radius-md);
    background: transparent;
    padding: 0;
    gap: 10px;
    box-shadow: none;
  }
  .form-field{ background: #fff; border-radius: var(--radius-pill); box-shadow: var(--shadow-md); }
  .guide-form .btn{ width: 100%; }

  .footer-links{ grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-col:last-child{ grid-column: span 2; }
}

@media (max-width: 480px){
  .hero h1{ font-size: 2rem; }
  .section-head h2{ font-size: 1.6rem; }
  .guide-content h2{ font-size: 1.7rem; }
  .logo{ font-size: 1.1rem; }
  .logo-icon-header{ height: 36px; width: 45px; }
}

@media (max-width: 380px){
  .logo{ font-size: 0.98rem; }
}