/* PetGo web design tokens — SAMPLED FROM THE INVESTOR DECK
   (PetGo_Investor_Deck_v18_final.pdf, supplied by Peter 25-Aug-2026, which he
   confirmed was built to match the website's appearance).

   Values are measured off rendered deck pages, not eyeballed:
     deep teal   #00665a  (76% of slide 1; headings, filled panels)   6.89:1 on white
     bright cyan #00b8d0  (timeline block; eyebrow labels, rules)     2.40:1 on white
     pale mint   #dff2f2  (49% of slides 2-3; stat/feature cards)
   The blue in the logo (#0090f0) is the APP ICON, not the brand's UI colour —
   in the deck the blue icon sits ON the teal. Do not re-derive the palette from
   the icon: that mistake was made earlier the same day and reversed here. */
:root {
  --pg-brand: #00665a;
  --pg-brand-dark: #004d44;
  --pg-accent: #00b8d0;        /* DECORATIVE ONLY - fails AA as small text */
  --pg-accent-text: #00838f;   /* eyebrow labels: 4.52:1 on white */
  --pg-bg: #ffffff;
  --pg-surface: #ffffff;
  --pg-surface-soft: #dff2f2;
  --pg-text: #14201e;
  --pg-text-secondary: #55635f;
  --pg-border: #d5e6e4;
  --pg-on-brand-soft: rgba(255,255,255,.86);
  --pg-radius-sm: 10px;
  --pg-radius-md: 16px;
  --pg-radius-lg: 24px;
  --pg-shadow-sm: 0 2px 10px rgba(0, 40, 35, .06);
  --pg-shadow-md: 0 14px 40px rgba(0, 40, 35, .12);
  --pg-container: 1280px;
}
.site-container { width: min(var(--pg-container), calc(100% - 64px)); margin-inline: auto; }
@media (max-width: 1023px) { .site-container { width: calc(100% - 48px); } }
@media (max-width: 599px)  { .site-container { width: calc(100% - 32px); } }