/* generated hover rules */
.hv1:hover{background: #F3F1FE;}
.hv2:hover{color: #3D2FA8;}
.hv3:hover{background: #3D2FA8;}
.hv4:hover{background: #3D2FA8; color: #ffffff;}
.hv5:hover{background: #ffffff; color: #3D2FA8;}
.hv6:hover{border-color: #C9C1F5;}
.hv7:hover{color: #5A4BD6;}
.hv8:hover{background: #F3F1FE; color: #3D2FA8;}
.hv9:hover{background: #FAF9FF;}
.hv10:hover{background: #F3F1FE; color: #191632;}
.hv11:hover{transform: scale(1.045);}
.hv12:hover{background: #F3F1FE; border-color: #C9C1F5;}
.hv13:hover{background: rgba(255,255,255,0.12); color: #ffffff;}

/* ==========================================================================
   Petsocare partner site - responsive layer.

   The design's desktop layout lives in inline style attributes and is correct
   as-is, so nothing here applies above 900px. Below that we override those
   inline styles, which needs !important - that is the trade for leaving the
   desktop rendering byte-identical.
   ========================================================================== */

/* Shared niceties (all widths) ------------------------------------------- */

html { scroll-behavior: smooth; }
img { max-width: 100%; }

/* The design sets display on elements inline (e.g. display:block on the
   switcher images), which outranks the UA rule for [hidden]. Without this,
   every hidden branch renders and the panels stack. */
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid #5A4BD6;
  outline-offset: 2px;
  border-radius: 4px;
}

.form-error {
  color: #B3261E;
  font-size: 13.5px;
  line-height: 1.45;
  margin: 12px 0 0;
}

/* Honeypot: off-screen, never focusable, invisible to real users. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

button[disabled] { opacity: 0.65; cursor: default !important; }

/* Hamburger - hidden until mobile ---------------------------------------- */

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  background: none;
  border: 0;
  cursor: pointer;
  margin-left: auto;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: #191632;
  border-radius: 2px;
  transition: transform 180ms ease, opacity 180ms ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Tablet and below
   ========================================================================== */

@media (max-width: 1100px) {
  /* Two-column feature rows go single-column before the phone breakpoint. */
  section > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 900px) {

  /* --- Navigation ------------------------------------------------------ */

  .nav-toggle { display: flex; }
  body.nav-open { overflow: hidden; }

  /* Keep the bar on one row: logo, then Get started, then the toggle. */
  header > div {
    flex-wrap: nowrap !important;
    gap: 8px !important;
    height: 68px !important;
  }
  header > div > a:first-child img { max-height: 34px; width: auto; }
  header > div > div:last-child { margin-left: 0 !important; }
  .nav-toggle { order: 3; margin-left: 0 !important; flex-shrink: 0; }
  header > div > div:last-child { order: 2; }
  .site-nav { order: 4; }

  .site-nav {
    display: none !important;
    position: fixed !important;
    inset: 68px 0 0 0 !important;
    background: #ffffff !important;
    padding: 12px 20px 40px !important;
    overflow-y: auto !important;
    z-index: 200 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    border-top: 1px solid #E7E4F5;
  }
  .site-nav.open { display: flex !important; }

  /* Inside the drawer every dropdown is simply expanded. */
  .site-nav > div { position: static !important; width: 100% !important; }
  .site-nav > div > button {
    width: 100% !important;
    justify-content: space-between !important;
    padding: 16px 4px !important;
    font-size: 17px !important;
    border-bottom: 1px solid #F0EDFB !important;
    border-radius: 0 !important;
  }
  .site-nav [data-if] {
    position: static !important;
    display: block !important;
    padding-top: 0 !important;
  }
  .site-nav [data-if] > div {
    width: 100% !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 4px 0 12px !important;
    background: transparent !important;
  }
  .site-nav [data-if] a { padding: 11px 12px !important; }
  .site-nav > a {
    padding: 16px 4px !important;
    font-size: 17px !important;
    border-bottom: 1px solid #F0EDFB !important;
  }

  /* --- Global layout --------------------------------------------------- */

  /* Collapse every multi-column grid. */
  div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  section {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 56px !important;
  }
  /* Hero bands carry their own padding on an inner wrapper, so the generic
     section padding above would double it and push the pitch below the fold. */
  #signup { padding: 0 !important; }
  header + section { padding-top: 0 !important; }
  header + section:not(#signup) > div {
    padding-top: 38px !important;
    padding-bottom: 40px !important;
  }

  /* Sections whose padding came from the max-width wrapper. */
  section > div[style*="max-width"] { padding-left: 0 !important; padding-right: 0 !important; }

  h1 {
    font-size: 32px !important;
    line-height: 1.14 !important;
    letter-spacing: -0.6px !important;
    margin-bottom: 24px !important;
  }
  h2 { font-size: 25px !important; line-height: 1.2 !important; letter-spacing: -0.3px !important; }
  h3 { font-size: 21px !important; }
  p, li { font-size: 16px !important; }

  /* Big display numbers in stat cards. */
  div[style*="font-size: 54px"] { font-size: 38px !important; }
  div[style*="font-size: 44px"] { font-size: 32px !important; }
  p[style*="font-size: 30px"]  { font-size: 21px !important; line-height: 1.4 !important; }

  /* --- Hero ------------------------------------------------------------ */

  #signup > div { display: block !important; }
  #signup > div > div:first-child {
    padding: 40px 20px 32px !important;
  }
  /* The shaped hero photo becomes a plain banner above the form. */
  #signup > div > div:last-child {
    min-height: 260px !important;
    height: 260px !important;
  }
  #signup img {
    border-radius: 0 !important;
    object-position: 56% 30% !important;
  }

  /* --- Cards, panels, rounded boxes ------------------------------------ */

  div[style*="border-radius: 26px"],
  div[style*="border-radius: 24px"],
  div[style*="border-radius: 22px"],
  div[style*="border-radius: 20px"] {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  div[style*="padding: 54px 56px"] { padding: 34px 22px !important; }
  div[style*="padding: 34px 36px 36px"] { padding: 26px 20px 28px !important; }
  div[style*="padding: 32px"] { padding: 24px 20px !important; }

  /* --- Forms ----------------------------------------------------------- */

  /* 16px minimum stops iOS Safari zooming the page on focus. */
  input, select, textarea {
    font-size: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  button { font-size: 16px !important; }

  /* --- Carousel -------------------------------------------------------- */

  /* Arrows need to be thumb-sized and clear of the cards. */
  [data-action="prev"], [data-action="next"] {
    width: 46px !important;
    height: 46px !important;
  }

  /* --- Vertical switcher ----------------------------------------------- */

  /* The 9 category buttons scroll horizontally instead of stacking 9 deep. */
  [data-action="t.pick"] {
    scroll-snap-align: start;
    flex: 0 0 auto !important;
    min-width: 210px;
  }
  div[style*="grid"]:has(> [data-action="t.pick"]) {
    display: flex !important;
    overflow-x: auto !important;
    gap: 10px !important;
    padding-bottom: 8px !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  /* The paired image panel sits above the copy. */
  div[style*="min-height: 420px"] { min-height: 210px !important; }

  /* --- FAQ groups ------------------------------------------------------ */

  div[style*="grid"]:has(> [data-action="g.pick"]) {
    display: flex !important;
    overflow-x: auto !important;
    gap: 8px !important;
    scroll-snap-type: x mandatory;
  }
  [data-action="g.pick"] { flex: 0 0 auto !important; scroll-snap-align: start; }

  /* --- Footer ---------------------------------------------------------- */

  footer > div { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
  footer { padding-left: 20px !important; padding-right: 20px !important; }

  /* Footer links sit at 12.5px by design - too small to read or tap on a
     phone, and they are the main cross-navigation on mobile. */
  footer a { font-size: 14.5px !important; }
  footer li, footer a { line-height: 1.9 !important; }

  /* Comfortable tap targets for anything actionable. */
  a, button { min-height: 40px; }
  footer a, .site-nav a { display: block; }
}

/* ==========================================================================
   Small phones
   ========================================================================== */

@media (max-width: 520px) {
  h1 { font-size: 28px !important; }
  h2 { font-size: 22px !important; }

  section { padding-left: 16px !important; padding-right: 16px !important; }

  /* Side-by-side inputs (email + phone) stack. */
  div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }

  footer > div { grid-template-columns: 1fr !important; }

  /* Stat rows and pill rows wrap rather than overflow (never the header). */
  section div[style*="display: flex"][style*="gap"],
  footer div[style*="display: flex"][style*="gap"] { flex-wrap: wrap !important; }

  /* "Log in" is reachable from the drawer; the bar keeps the primary CTA. */
  header > div > div:last-child > a:first-child { display: none !important; }
  header > div > div:last-child > a:last-child {
    padding: 9px 15px !important;
    font-size: 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}