/* Service pages (Daycare, Boarding, Grooming). Loads after base.css and pages.css
   (hero, section heads, reveals, offer cards, why grid, trial coupon). */

/* ---------- Pricing ---------- */
.plans { position: relative; padding: 90px 0 110px; }
.plans__grid { display: grid; grid-template-columns: 1.25fr repeat(3, 1fr); gap: 22px; align-items: stretch; }
.plan {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  padding: 26px 24px 24px;
  background: var(--white); border: 2px solid var(--teal); border-radius: 12px; box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.plan:hover { transform: translate(-3px, -3px); box-shadow: 10px 10px 0 var(--teal); }
.plan h3 { font-size: 1.6rem; margin-bottom: .8rem; }
.plan .prices { align-self: stretch; margin-bottom: .6rem; }
.plan .btn { margin-top: auto; }
.plan__price {
  margin: 0; font-family: var(--display); font-weight: 900; font-size: 3.4rem; line-height: 1;
  font-variation-settings: "SOFT" 100, "opsz" 144; color: var(--orange);
}
.plan__per { margin: .5rem 0 1.4rem; font-weight: 700; }
.plan--day { background: var(--sun); }
.plan--best { background: var(--teal); color: var(--paper); box-shadow: 6px 6px 0 var(--orange); transform: rotate(-1deg); }
.plan--best:hover { box-shadow: 10px 10px 0 var(--orange); transform: translate(-3px, -3px) rotate(-1deg); }
.plan--best .plan__price { color: var(--sun); }
.plan--best .btn { border-color: var(--paper); box-shadow: 4px 4px 0 var(--paper); }
.plan__flag {
  position: absolute; top: -14px; right: 16px;
  padding: .3em .8em; background: var(--orange); color: var(--white);
  border: 2px solid var(--paper); border-radius: 999px;
  font-weight: 900; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
}
.plans__grid--three { grid-template-columns: repeat(3, 1fr); }
.plan__list { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .45rem; font-weight: 700; }
.plan__list li { position: relative; padding-left: 1.6em; }
.plan__list li::before {
  content: ""; position: absolute; left: .2em; top: .38em; width: .8em; height: .45em;
  border-left: 3px solid var(--sun); border-bottom: 3px solid var(--sun); transform: rotate(-45deg);
}
.plans__note { display: flex; align-items: center; gap: 10px; margin: 2rem 0 0; font-weight: 900; font-size: 1.05rem; }
/* The paw artwork is white, so tint it brand orange (same filter as the fact-list paws). */
.plans__note img { width: 20px; filter: brightness(0) saturate(100%) invert(31%) sepia(91%) saturate(2970%) hue-rotate(352deg) brightness(97%) contrast(93%); }

/* ---------- How the day goes ---------- */
.flow { padding: 40px 0 110px; }
.flow__steps {
  list-style: none; margin: 0; padding: 0; counter-reset: step;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; position: relative;
}
/* the dotted path that links the steps */
.flow__steps::before {
  content: ""; position: absolute; left: 6%; right: 6%; top: 22px;
  border-top: 3px dotted rgba(0, 71, 80, .4);
}
.flow__steps li { position: relative; padding-top: 58px; }
.flow__steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0; width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--sun); border: 2px solid var(--teal); border-radius: 50%; box-shadow: 3px 3px 0 var(--teal);
  font-family: var(--display); font-weight: 900; font-size: 1.3rem;
}
.flow__steps li:nth-child(even)::before { background: var(--sea); }
.flow__when { font-weight: 900; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); }
.flow__steps h3 { font-size: 1.45rem; margin: .3rem 0 .4rem; }
.flow__steps p { margin: 0; font-size: .95rem; }
.flow__more {
  display: inline-flex; gap: .4em; margin-top: 2.4rem;
  font-weight: 900; font-size: .9rem; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); text-decoration: none;
}
.flow__more:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Play groups ---------- */
.groups { padding: 0 0 120px; }
.offer--room .offer__body { padding: 22px 24px 24px; }
.offer--room h3 { font-size: 2rem; margin-bottom: .3rem; }
.offer--room p { margin: 0; }

/* ---------- Why (four across) ---------- */
.why__grid--four { grid-template-columns: repeat(4, 1fr); }
.why__grid--four b { font-size: 2.6rem; height: 2.6rem; }

/* ---------- FAQ ---------- */
.faq { padding: 110px 0; }
.faq__grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; align-items: start; }
.faq__side .know__card h3 { font-size: 2.2rem; margin-bottom: 1rem; }
.faq__list details {
  border-top: 2px solid var(--teal);
}
.faq__list details:last-child { border-bottom: 2px solid var(--teal); }
.faq__list summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 4px; cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 900; font-size: 1.35rem; line-height: 1.15;
  font-variation-settings: "SOFT" 100;
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after {
  content: "+"; flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  border: 2px solid var(--teal); border-radius: 50%; background: var(--sun);
  font-family: var(--body); font-size: 1.3rem; transition: transform .25s ease;
}
.faq__list details[open] summary::after { transform: rotate(45deg); background: var(--orange); color: var(--white); }
.faq__list summary:hover { color: var(--orange); }
.faq__list details p { margin: 0 0 22px; padding: 0 50px 0 4px; }
.faq__list details a { font-weight: 700; text-underline-offset: 3px; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .plans__grid { grid-template-columns: repeat(2, 1fr); }
  .flow__steps { grid-template-columns: repeat(3, 1fr); row-gap: 36px; }
  .flow__steps::before { display: none; }
  .why__grid--four { grid-template-columns: repeat(2, 1fr); }
  .faq__grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 760px) {
  .plans { padding: 70px 0 80px; }
  .plans__grid { grid-template-columns: 1fr; gap: 26px; }
  .plan--best, .plan--best:hover { transform: none; }
  .flow { padding: 20px 0 80px; }
  .flow__steps { grid-template-columns: 1fr; row-gap: 0; }
  /* On phones the steps run down a vertical dotted line. */
  .flow__steps li { padding: 0 0 26px 64px; min-height: 46px; }
  .flow__steps li:not(:last-child)::after {
    content: ""; position: absolute; left: 22px; top: 50px; bottom: 4px; border-left: 3px dotted rgba(0, 71, 80, .4);
  }
  .groups { padding-bottom: 80px; }
  .why__grid--four { grid-template-columns: 1fr; }
  .faq { padding: 80px 0; }
  .faq__list summary { font-size: 1.15rem; padding: 18px 0; }
  .faq__list details p { padding-right: 0; }
}