/* ============================================================
   MEADOW RIDGE · PRICING PAGE
   assets/css/pricing.css
   All page-specific classes use pr- prefix.
   Base layout (.page-hero, .final-cta, .footer, etc.)
   inherited from components.css — not duplicated here.
============================================================ */


/* ============================================================
   PRICING · 01 · HERO (TEXT-ONLY)
   No image. Pricing pages are about clarity — confident headline,
   brief sub, then straight into prices.
============================================================ */

.pr-hero {
  background-color: var(--color-cream);
  padding: var(--space-16) var(--space-5) var(--space-12);
  text-align: center;
}

.pr-hero__inner {
  max-width: 760px;
  margin: 0 auto;
}

.pr-hero__eyebrow {
  font-size: var(--type-eyebrow);
  font-weight: var(--weight-semibold);
  color: var(--color-wood);
  text-transform: uppercase;
  letter-spacing: var(--type-eyebrow-ls);
  margin: 0 0 var(--space-4);
}

.pr-hero__heading {
  font-size: clamp(40px, 6.5vw, 64px);
  font-weight: var(--weight-bold);
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--color-charcoal);
  margin: 0 0 var(--space-5);
}

.pr-hero__heading-line {
  display: block;
}

.pr-hero__heading-accent {
  color: var(--color-wood);
  font-style: italic;
}

.pr-hero__subhead {
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.55;
  color: var(--color-charcoal-body);
  margin: 0 auto;
  max-width: 600px;
}

@media (min-width: 768px) {
  .pr-hero {
    padding: var(--space-20) var(--space-8) var(--space-16);
  }
}

@media (min-width: 1024px) {
  .pr-hero {
    padding: var(--space-24) var(--space-10) var(--space-16);
  }
}


/* ============================================================
   PRICING · STICKY SECTION NAV
   Sticky-on-scroll anchor row that jumps to each pricing section.
   Sits below the main nav (top: 64px). Mobile: horizontal scroll
   if content overflows the viewport width.
============================================================ */

.pr-nav {
  background-color: var(--color-cream);
  border-top: 1px solid rgba(11, 18, 21, 0.08);
  border-bottom: 1px solid rgba(11, 18, 21, 0.08);
}

.pr-nav__inner {
  max-width: 1200px;
  margin: 0 auto;
  scrollbar-width: none;
}

.pr-nav__inner::-webkit-scrollbar {
  display: none;
}

/* Mobile: 3-col × 2-row grid so all 6 links are visible without scrolling.
   Desktop: single horizontal row, centered. */
.pr-nav__list {
  list-style: none;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .pr-nav__list {
    display: flex;
    justify-content: center;
    padding: 0 var(--space-3);
    overflow-x: auto;
  }
}

.pr-nav__link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-3);
  font-size: 15px;
  font-weight: var(--weight-medium);
  color: var(--color-charcoal-body);
  text-decoration: none;
  letter-spacing: 0.2px;
  min-height: 56px;
  width: 100%;
  position: relative;
  transition: color var(--speed-fast) var(--ease-out);
}

/* Amber underline indicator — scales in on active, invisible by default */
.pr-nav__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--space-3);
  right: var(--space-3);
  height: 2px;
  background-color: var(--color-wood);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--speed-fast) var(--ease-out);
}

.pr-nav__link.is-active {
  color: var(--color-wood);
  font-weight: var(--weight-semibold);
}

.pr-nav__link.is-active::after {
  transform: scaleX(1);
}

@media (min-width: 768px) {
  .pr-nav__link {
    padding: var(--space-3) var(--space-4);
    min-height: 48px;
    width: auto;
  }
}

/* Mobile: hairline divider between rows (after first 3 cells) */
.pr-nav__list > li:nth-child(-n+3) .pr-nav__link {
  border-bottom: 1px solid rgba(11, 18, 21, 0.08);
}

@media (min-width: 768px) {
  .pr-nav__list > li:nth-child(-n+3) .pr-nav__link {
    border-bottom: none;
  }
}

@media (hover: hover) {
  .pr-nav__link:hover {
    color: var(--color-wood);
  }
}

.pr-nav__link:focus-visible {
  outline: 2px solid var(--color-wood);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}


/* ============================================================
   PRICING · 02 · BOARDING
   Background: --color-cream.
   Two-tier dog grid + single cat tier. Tier cards use a shared
   .pr-tier pattern (used again in §03 Daycare for consistency).
============================================================ */

.pr-boarding {
  background-color: var(--color-cream);
  padding: var(--space-16) var(--space-5);
}

.pr-boarding__inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* Section header */
.pr-boarding__header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto var(--space-12);
}

.pr-boarding__eyebrow {
  font-size: var(--type-eyebrow);
  font-weight: var(--weight-semibold);
  color: var(--color-wood);
  text-transform: uppercase;
  letter-spacing: var(--type-eyebrow-ls);
  margin: 0 0 var(--space-3);
}

.pr-boarding__heading {
  font-size: var(--type-h2);
  font-weight: var(--weight-bold);
  line-height: var(--type-h2-lh);
  letter-spacing: var(--type-h2-ls);
  color: var(--color-charcoal);
  margin: 0 0 var(--space-4);
}

.pr-boarding__heading-accent {
  color: var(--color-wood);
  font-style: italic;
}

.pr-boarding__lead {
  font-size: var(--type-lead);
  line-height: var(--type-lead-lh);
  color: var(--color-charcoal-body);
  margin: 0;
}

/* Subgroup (Dogs / Cats) */
.pr-boarding__group + .pr-boarding__group {
  margin-top: var(--space-12);
}

.pr-boarding__group-heading {
  font-size: 18px;
  font-weight: var(--weight-semibold);
  color: var(--color-charcoal);
  letter-spacing: -0.2px;
  margin: 0 0 var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(11, 18, 21, 0.10);
}

/* Tier grid — 2-up for dogs, single (constrained) for cats */
.pr-boarding__tiers {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .pr-boarding__tiers {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
}

.pr-boarding__tiers--single {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .pr-boarding__tiers--single {
    grid-template-columns: 1fr;
    max-width: 580px;
  }
}


/* ============================================================
   PRICING · SHARED TIER CARD (.pr-tier)
   Reused across boarding, daycare, training. Paper-bg card with
   header (name + desc) + rate block + packages mini-table.
============================================================ */

.pr-tier {
  background-color: var(--color-paper);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  box-shadow:
    0 4px 12px -2px rgba(11, 18, 21, 0.08),
    0 1px 4px rgba(11, 18, 21, 0.04);
  position: relative; /* needed for .pr-tier__tag absolute badge */
}

/* Featured tier — amber outline + warm shadow. Used on Subscription (self-wash). */
.pr-tier--featured {
  border: 2px solid var(--color-wood);
  box-shadow:
    0 4px 12px -2px rgba(11, 18, 21, 0.08),
    0 1px 4px rgba(11, 18, 21, 0.04),
    0 8px 28px -4px rgba(184, 115, 51, 0.22);
}

/* Most Popular pill badge — matches boarding + daycare treatment exactly */
.pr-tier__tag {
  position: absolute;
  top: -12px;
  right: var(--space-5);
  background-color: var(--color-wood);
  color: var(--color-cream);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(11, 18, 21, 0.18);
}

@media (min-width: 1024px) {
  .pr-tier {
    padding: var(--space-8);
    gap: var(--space-8);
  }
}

/* Header */
.pr-tier__top {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pr-tier__name {
  font-size: 22px;
  font-weight: var(--weight-bold);
  color: var(--color-charcoal);
  letter-spacing: -0.4px;
  line-height: 1.2;
  margin: 0;
}

.pr-tier__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-charcoal-meta);
  margin: 0;
}

/* Rate block — hairline divider on mobile (helps section breaks in a single
   stacked column). Removed at 768px+ where side-by-side cards make the
   hairlines feel tabular/fragmented. Card gap handles separation on desktop. */
.pr-tier__rate {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(11, 18, 21, 0.08);
}

@media (min-width: 768px) {
  .pr-tier__rate {
    padding-top: 0;
    border-top: none;
  }
}

.pr-tier__rate-label {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: var(--color-charcoal-meta);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin: 0;
}

.pr-tier__rate-price {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  margin: 0;
}

.pr-tier__amount {
  font-size: 36px;
  font-weight: var(--weight-bold);
  color: var(--color-charcoal);
  letter-spacing: -1px;
  line-height: 1;
}

.pr-tier__unit {
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: var(--color-charcoal-meta);
}

.pr-tier__notes {
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-charcoal-body);
}

.pr-tier__notes strong {
  font-weight: var(--weight-semibold);
  color: var(--color-charcoal);
}

/* Packages mini-table — hairline above on mobile (matches rate block);
   removed at 768px+ for the same reason. */
.pr-tier__packages {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(11, 18, 21, 0.08);
}

@media (min-width: 768px) {
  .pr-tier__packages {
    padding-top: 0;
    border-top: none;
  }
}

.pr-tier__packages-label {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: var(--color-charcoal-meta);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin: 0;
}

.pr-tier__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.pr-tier__table th,
.pr-tier__table td {
  padding: var(--space-3) 0;
  border-bottom: 1px solid rgba(11, 18, 21, 0.06);
}

.pr-tier__table tr:last-child th,
.pr-tier__table tr:last-child td {
  border-bottom: none;
}

.pr-tier__table th {
  text-align: left;
  font-weight: var(--weight-medium);
  color: var(--color-charcoal-body);
}

.pr-tier__table td {
  text-align: right;
  font-weight: var(--weight-semibold);
  color: var(--color-charcoal);
  font-feature-settings: 'tnum' 1;
}

@media (min-width: 768px) {
  .pr-boarding {
    padding: var(--space-20) var(--space-8);
  }
}

@media (min-width: 1024px) {
  .pr-boarding {
    padding: var(--space-24) var(--space-10);
  }
}


/* ============================================================
   PRICING · 03 · DAYCARE
   Background: --color-stone.
   Two-tier grid (Half Day + Full Day) using shared .pr-tier pattern.
============================================================ */

.pr-daycare {
  background-color: var(--color-stone);
  padding: var(--space-16) var(--space-5);
}

.pr-daycare__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.pr-daycare__header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto var(--space-12);
}

.pr-daycare__eyebrow {
  font-size: var(--type-eyebrow);
  font-weight: var(--weight-semibold);
  color: var(--color-wood);
  text-transform: uppercase;
  letter-spacing: var(--type-eyebrow-ls);
  margin: 0 0 var(--space-3);
}

.pr-daycare__heading {
  font-size: var(--type-h2);
  font-weight: var(--weight-bold);
  line-height: var(--type-h2-lh);
  letter-spacing: var(--type-h2-ls);
  color: var(--color-charcoal);
  margin: 0 0 var(--space-4);
}

.pr-daycare__heading-accent {
  color: var(--color-wood);
  font-style: italic;
}

.pr-daycare__lead {
  font-size: var(--type-lead);
  line-height: var(--type-lead-lh);
  color: var(--color-charcoal-body);
  margin: 0;
}

/* Tier grid — 2-up at 768px+ */
.pr-daycare__tiers {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .pr-daycare__tiers {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }

  .pr-daycare {
    padding: var(--space-20) var(--space-8);
  }
}

@media (min-width: 1024px) {
  .pr-daycare {
    padding: var(--space-24) var(--space-10);
  }
}


/* ============================================================
   PRICING · 04 · SELF-WASH 24/7
   Background: --color-cream (alternates from stone daycare).
   Two-tier grid using .pr-tier shared pattern, packages omitted.
============================================================ */

.pr-selfwash {
  background-color: var(--color-cream);
  padding: var(--space-16) var(--space-5);
}

.pr-selfwash__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.pr-selfwash__header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto var(--space-12);
}

.pr-selfwash__eyebrow {
  font-size: var(--type-eyebrow);
  font-weight: var(--weight-semibold);
  color: var(--color-wood);
  text-transform: uppercase;
  letter-spacing: var(--type-eyebrow-ls);
  margin: 0 0 var(--space-3);
}

.pr-selfwash__heading {
  font-size: var(--type-h2);
  font-weight: var(--weight-bold);
  line-height: var(--type-h2-lh);
  letter-spacing: var(--type-h2-ls);
  color: var(--color-charcoal);
  margin: 0 0 var(--space-4);
}

.pr-selfwash__heading-accent {
  color: var(--color-wood);
  font-style: italic;
}

.pr-selfwash__lead {
  font-size: var(--type-lead);
  line-height: var(--type-lead-lh);
  color: var(--color-charcoal-body);
  margin: 0;
}

/* Tier grid — 2-up at 768px+, narrower max so cards aren't huge.
   align-items: start so cards take their natural heights (Single Use
   has less content than Subscription — stretching leaves empty space). */
.pr-selfwash__tiers {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  max-width: 880px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .pr-selfwash__tiers {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
    align-items: start;
  }
}

/* Requirement note — centered below tiers */
.pr-selfwash__note {
  text-align: center;
  font-size: 13px;
  font-style: italic;
  color: var(--color-charcoal-meta);
  margin: var(--space-8) auto 0;
  max-width: 560px;
  line-height: 1.55;
}

/* CTA button on the Subscription tier card */
.pr-tier__cta {
  margin-top: var(--space-6);
  width: 100%;
  justify-content: center;
}

/* ── Membership signup form ── */
.pr-selfwash__form-wrap {
  max-width: 540px;
  margin: var(--space-12) auto 0;
  background-color: var(--color-paper);
  border-radius: var(--radius-lg);
  border-top: 4px solid var(--color-wood);
  box-shadow: 0 8px 24px -4px rgba(11, 18, 21, 0.10), 0 2px 8px rgba(11, 18, 21, 0.05);
  padding: var(--space-8) var(--space-6);
  scroll-margin-top: 100px;
}

.pr-selfwash__form-header {
  text-align: center;
  margin-bottom: var(--space-6);
}

.pr-selfwash__form-heading {
  font-size: clamp(1.25rem, 2.5vw, 1.6rem);
  font-weight: var(--weight-bold);
  color: var(--color-charcoal);
  letter-spacing: -0.3px;
  margin: 0 0 var(--space-2);
}

.pr-selfwash__form-sub {
  font-size: var(--type-small);
  line-height: 1.5;
  color: var(--color-charcoal-body);
  margin: 0;
}

.pr-selfwash__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.pr-selfwash__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pr-selfwash__label {
  font-size: var(--type-small);
  font-weight: var(--weight-semibold);
  color: var(--color-charcoal);
  letter-spacing: 0.2px;
}

.pr-selfwash__input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--color-stone);
  border-radius: var(--radius-md);
  font-size: var(--type-body);
  font-family: var(--font-primary);
  color: var(--color-charcoal);
  background-color: var(--color-cream);
  transition: border-color var(--speed-fast) var(--ease-out),
              box-shadow var(--speed-fast) var(--ease-out);
  -webkit-appearance: none;
}

.pr-selfwash__input::placeholder {
  color: var(--color-charcoal-meta);
}

.pr-selfwash__input:focus {
  outline: none;
  border-color: var(--color-wood);
  box-shadow: 0 0 0 3px rgba(161, 93, 37, 0.12);
}

.pr-selfwash__submit {
  width: 100%;
  justify-content: center;
}

.pr-selfwash__form-legal {
  text-align: center;
  font-size: 12px;
  color: var(--color-charcoal-meta);
  line-height: 1.5;
  margin: var(--space-4) 0 0;
}

@media (min-width: 768px) {
  .pr-selfwash {
    padding: var(--space-20) var(--space-8);
  }
}

@media (min-width: 1024px) {
  .pr-selfwash {
    padding: var(--space-24) var(--space-10);
  }
}


/* ============================================================
   PRICING · 05 · GROOMING
   Background: --color-stone.
   Single .pr-consult card — paper bg with 3px amber left border
   marking it as a callout. Same .pr-consult pattern will be
   reused for Training Retreat + Day Train inside §06.
============================================================ */

.pr-grooming {
  background-color: var(--color-stone);
  padding: var(--space-16) var(--space-5);
}

.pr-grooming__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.pr-grooming__header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto var(--space-10);
}

.pr-grooming__eyebrow {
  font-size: var(--type-eyebrow);
  font-weight: var(--weight-semibold);
  color: var(--color-wood);
  text-transform: uppercase;
  letter-spacing: var(--type-eyebrow-ls);
  margin: 0 0 var(--space-3);
}

.pr-grooming__heading {
  font-size: var(--type-h2);
  font-weight: var(--weight-bold);
  line-height: var(--type-h2-lh);
  letter-spacing: var(--type-h2-ls);
  color: var(--color-charcoal);
  margin: 0 0 var(--space-4);
}

.pr-grooming__heading-accent {
  color: var(--color-wood);
  font-style: italic;
}

.pr-grooming__lead {
  font-size: var(--type-lead);
  line-height: var(--type-lead-lh);
  color: var(--color-charcoal-body);
  margin: 0;
}

/* Group sections (Dogs / Cats / Add-Ons) */
.pr-grooming__group {
  margin-top: var(--space-12);
}

.pr-grooming__group-heading {
  font-size: 18px;
  font-weight: var(--weight-semibold);
  color: var(--color-charcoal);
  letter-spacing: -0.2px;
  margin: 0 0 var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(11, 18, 21, 0.10);
}

/* 2-column tier grid — same rhythm as boarding */
.pr-grooming__tiers {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .pr-grooming__tiers {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
}

/* Walk-in Nail Grind strip */
.pr-grooming__walkin {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: rgba(11, 18, 21, 0.04);
  border-radius: var(--radius-md);
}

.pr-grooming__walkin-label {
  font-size: var(--type-small);
  font-weight: var(--weight-semibold);
  color: var(--color-charcoal);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
}

.pr-grooming__walkin-price {
  font-size: var(--type-small);
  font-weight: var(--weight-semibold);
  color: var(--color-wood);
}

.pr-grooming__walkin-note {
  font-size: var(--type-small);
  color: var(--color-charcoal-meta);
  font-style: italic;
}

/* Add-ons table — full width, no card wrapper */
.pr-grooming__addons-table {
  width: 100%;
  max-width: 560px;
}

.pr-grooming__addon-note {
  font-size: var(--type-meta);
  color: var(--color-charcoal-meta);
  font-style: italic;
  font-weight: var(--weight-regular);
  margin-left: var(--space-1);
}

/* Disclaimer */
.pr-grooming__disclaimer {
  font-size: var(--type-meta);
  color: var(--color-charcoal-meta);
  font-style: italic;
  margin: var(--space-10) 0 var(--space-8);
  text-align: center;
}


/* ============================================================
   PRICING · SHARED CONSULTATION CARD (.pr-consult)
   Reused for Grooming + Training Retreat + Day Train —
   "we quote this at consultation" callouts.
   Paper bg + amber left border + centered max-width 640px.
============================================================ */

.pr-consult {
  background-color: var(--color-paper);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-wood);
  padding: var(--space-8);
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  box-shadow:
    0 4px 12px -2px rgba(11, 18, 21, 0.08),
    0 1px 4px rgba(11, 18, 21, 0.04);
  text-align: center;
  align-items: center;
}

.pr-consult__label {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: var(--color-charcoal-meta);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin: 0;
}

.pr-consult__value {
  font-size: clamp(24px, 3vw, 30px);
  font-weight: var(--weight-bold);
  color: var(--color-charcoal);
  letter-spacing: -0.5px;
  line-height: 1.2;
  margin: 0;
}

.pr-consult__note {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-charcoal-body);
  margin: 0;
  max-width: 440px;
}

.pr-consult__ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

@media (min-width: 600px) {
  .pr-consult__ctas {
    flex-direction: row;
    gap: var(--space-5);
  }
}

.pr-consult__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--color-wood);
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 44px;
  transition: color var(--speed-fast) var(--ease-out);
}

@media (hover: hover) {
  .pr-consult__link:hover {
    color: var(--color-wood-dark);
  }
}

.pr-consult__link:focus-visible {
  outline: 2px solid var(--color-wood);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (min-width: 768px) {
  .pr-grooming {
    padding: var(--space-20) var(--space-8);
  }

  .pr-consult {
    padding: var(--space-10);
    gap: var(--space-5);
  }
}

@media (min-width: 1024px) {
  .pr-grooming {
    padding: var(--space-24) var(--space-10);
  }
}


/* ============================================================
   PRICING · 06 · TRAINING
   Background: --color-cream.
   Three subsections: Group Classes (table), Private Lessons (tier),
   Board-and-Train (2 consultation cards + Acuity CTA).
============================================================ */

.pr-training {
  background-color: var(--color-cream);
  padding: var(--space-16) var(--space-5);
}

.pr-training__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.pr-training__header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto var(--space-12);
}

.pr-training__heading {
  font-size: var(--type-h2);
  font-weight: var(--weight-bold);
  line-height: var(--type-h2-lh);
  letter-spacing: var(--type-h2-ls);
  color: var(--color-charcoal);
  margin: 0 0 var(--space-4);
}

.pr-training__lead {
  font-size: var(--type-lead);
  line-height: var(--type-lead-lh);
  color: var(--color-charcoal-body);
  margin: 0;
}

/* Subgroup spacing */
.pr-training__group + .pr-training__group {
  margin-top: var(--space-12);
}

.pr-training__group-heading {
  font-size: 18px;
  font-weight: var(--weight-semibold);
  color: var(--color-charcoal);
  letter-spacing: -0.2px;
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(11, 18, 21, 0.10);
}

.pr-training__group-intro {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-charcoal-body);
  margin: 0 0 var(--space-5);
}

.pr-training__inline-link {
  color: var(--color-wood);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
  /* button reset */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}

@media (hover: hover) {
  .pr-training__inline-link:hover {
    color: var(--color-wood-dark);
  }
}

/* ─── Group Classes table ─── */
.pr-classes {
  background-color: var(--color-paper);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  box-shadow:
    0 4px 12px -2px rgba(11, 18, 21, 0.08),
    0 1px 4px rgba(11, 18, 21, 0.04);
}

@media (min-width: 1024px) {
  .pr-classes {
    padding: var(--space-6) var(--space-8);
    /* Card narrower than parent (.pr-training__inner is 1200px) and
       centered. Gives a tighter container around the 880px table inside.
       Removed the previous breakout — card is now narrower than parent. */
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }
}

.pr-classes-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

/* Desktop only: cap the table width and center it inside the wider card.
   Without this, the table stretches edge-to-edge and the columns push
   class names hard-left and prices hard-right, looking stretched. */
@media (min-width: 1024px) {
  .pr-classes-table {
    max-width: 880px;
    margin: 0 auto;
  }
}

.pr-classes-table thead th {
  text-align: left;
  padding: var(--space-3) 0;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: var(--color-charcoal-meta);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border-bottom: 1px solid rgba(11, 18, 21, 0.20);
}

.pr-classes-table thead .pr-classes-table__price-col {
  text-align: right;
}

.pr-classes-table tbody th {
  text-align: left;
  padding: var(--space-4) var(--space-3) var(--space-4) 0;
  font-weight: var(--weight-semibold);
  color: var(--color-charcoal);
  border-bottom: 1px solid rgba(11, 18, 21, 0.06);
  vertical-align: middle;
}

.pr-classes-table tbody td {
  padding: var(--space-4) 0;
  color: var(--color-charcoal-body);
  border-bottom: 1px solid rgba(11, 18, 21, 0.06);
  vertical-align: middle;
}

.pr-classes-table tbody td.pr-classes-table__price-col {
  text-align: right;
  color: var(--color-charcoal);
  font-weight: var(--weight-semibold);
  font-feature-settings: 'tnum' 1;
  white-space: nowrap;
}

.pr-classes-table tbody tr:last-child th,
.pr-classes-table tbody tr:last-child td {
  border-bottom: none;
}

/* ─── Private Lessons — single tier card, constrained width ─── */
.pr-training__lessons {
  max-width: 640px;
}

/* ─── Board-and-Train consultation cards (compact, no CTAs in card) ─── */
.pr-training__consult-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-10);
}

@media (min-width: 768px) {
  .pr-training__consult-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
}

/* Compact variant — overrides .pr-consult max-width/margin AND its
   centered content layout, since centered content reads as awkwardly
   sparse in a 2-up grid context. Left-aligned matches the rest of the
   page's tier-card pattern. */
.pr-training__consult-grid .pr-consult--compact {
  max-width: none;
  margin: 0;
  padding: var(--space-8);
  gap: var(--space-5);
  text-align: left;
  align-items: flex-start;
}

@media (min-width: 768px) {
  .pr-training__consult-grid .pr-consult--compact {
    padding: var(--space-8);
  }
}

/* Override the .pr-consult__note max-width so it can fill the card width
   instead of being constrained to 440px (which left awkward whitespace). */
.pr-training__consult-grid .pr-consult__note {
  max-width: none;
}

/* Cap the heading size so "Quote at consultation" doesn't reach the
   right edge of the card on mobile. Inside the compact 2-up grid,
   the heading needs room to breathe within the narrower card width. */
.pr-training__consult-grid .pr-consult__value {
  font-size: clamp(20px, 3vw, 28px);
}

/* Subsection-level CTA group — stacked at every viewport (button on top,
   secondary link below). Matches the site's standard CTA pattern (e.g.,
   final-cta__group on grooming/training/facility). Row layout was making
   the secondary link compete visually with the primary button. */
.pr-training__cta-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}

.pr-training__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--color-wood);
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 44px;
  transition: color var(--speed-fast) var(--ease-out);
}

@media (hover: hover) {
  .pr-training__link:hover {
    color: var(--color-wood-dark);
  }
}

@media (min-width: 768px) {
  .pr-training {
    padding: var(--space-20) var(--space-8);
  }
}


/* ─── Shared section CTA group (boarding, daycare, grooming) ─── */

.pr-cta-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-10);
  text-align: center;
}

.pr-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--color-wood);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--speed-fast) var(--ease-out);
}

@media (hover: hover) {
  .pr-cta-link:hover {
    color: var(--color-wood-dark);
  }
}

@media (min-width: 1024px) {
  .pr-training {
    padding: var(--space-24) var(--space-10);
  }
}


/* ============================================================
   PRICING · 07 · ADD-ONS
   Background: --color-stone.
   Two subgroups: For Dogs (16 items, 2-col grid at 768+) and
   For Cats (5 items, single col, narrower card).
============================================================ */

.pr-addons {
  background-color: var(--color-stone);
  padding: var(--space-16) var(--space-5);
}

.pr-addons__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.pr-addons__header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto var(--space-12);
}

.pr-addons__heading {
  font-size: var(--type-h2);
  font-weight: var(--weight-bold);
  line-height: var(--type-h2-lh);
  letter-spacing: var(--type-h2-ls);
  color: var(--color-charcoal);
  margin: 0 0 var(--space-4);
}

.pr-addons__lead {
  font-size: var(--type-lead);
  line-height: var(--type-lead-lh);
  color: var(--color-charcoal-body);
  margin: 0;
}

/* Subgroup */
.pr-addons__group + .pr-addons__group {
  margin-top: var(--space-10);
}

.pr-addons__group-heading {
  font-size: 18px;
  font-weight: var(--weight-semibold);
  color: var(--color-charcoal);
  letter-spacing: -0.2px;
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(11, 18, 21, 0.10);
}

/* Paper card — same pattern as .pr-classes */
.pr-addons__card {
  background-color: var(--color-paper);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  box-shadow:
    0 4px 12px -2px rgba(11, 18, 21, 0.08),
    0 1px 4px rgba(11, 18, 21, 0.04);
}

/* Mobile-only horizontal padding bump — content was touching card edges */
@media (max-width: 767px) {
  .pr-addons__card {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
}

@media (min-width: 1024px) {
  .pr-addons__card {
    padding: var(--space-6) var(--space-8);
  }
}

/* Narrower card for cat list (only 5 items) */
.pr-addons__card--narrow {
  max-width: 560px;
}

/* List */
.pr-addons__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 2-col grid for dog list at 768px+ */
@media (min-width: 768px) {
  .pr-addons__list--two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-10);
  }
}

/* Item — name on left, price on right */
.pr-addons__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  font-size: 15px;
  border-bottom: 1px solid rgba(11, 18, 21, 0.06);
}

.pr-addons__item:last-child {
  border-bottom: none;
}

/* In 2-col grid: also remove border on second-to-last item
   (the last item in the LEFT column when items are even) */
@media (min-width: 768px) {
  .pr-addons__list--two-col .pr-addons__item:nth-last-child(2) {
    border-bottom: none;
  }
}

.pr-addons__name {
  font-weight: var(--weight-medium);
  color: var(--color-charcoal-body);
  line-height: 1.4;
}

.pr-addons__name-note {
  font-style: italic;
  color: var(--color-charcoal-meta);
  font-weight: var(--weight-regular);
  font-size: 13px;
}

.pr-addons__price {
  font-weight: var(--weight-semibold);
  color: var(--color-wood);
  font-feature-settings: 'tnum' 1;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .pr-addons {
    padding: var(--space-20) var(--space-8);
  }
}

@media (min-width: 1024px) {
  .pr-addons {
    padding: var(--space-24) var(--space-10);
  }
}


/* ============================================================
   PRICING · 08 · FINE PRINT
   Background: --color-cream.
   4 policy items in a 2-col grid at 768+. Understated visual
   treatment — no cards, just label + content with subtle
   hairlines between items.
============================================================ */

.pr-fine {
  background-color: var(--color-cream);
  padding: var(--space-16) var(--space-5);
}

.pr-fine__inner {
  max-width: 1000px;
  margin: 0 auto;
}

.pr-fine__header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto var(--space-12);
}

.pr-fine__heading {
  font-size: var(--type-h2);
  font-weight: var(--weight-bold);
  line-height: var(--type-h2-lh);
  letter-spacing: var(--type-h2-ls);
  color: var(--color-charcoal);
  margin: 0 0 var(--space-4);
}

.pr-fine__lead {
  font-size: var(--type-lead);
  line-height: var(--type-lead-lh);
  color: var(--color-charcoal-body);
  margin: 0;
}

/* 2-col grid at 768+, single col mobile */
.pr-fine__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  border-top: 1px solid rgba(11, 18, 21, 0.10);
  padding-top: var(--space-6);
}

@media (min-width: 768px) {
  .pr-fine__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8) var(--space-10);
    padding-top: var(--space-8);
  }
}

.pr-fine__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pr-fine__label {
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--color-wood);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin: 0;
}

.pr-fine__content {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-charcoal-body);
  margin: 0;
}

/* Contact footnote — small, centered, italic-ish */
.pr-fine__contact {
  margin: var(--space-10) 0 0;
  padding-top: var(--space-6);
  border-top: 1px solid rgba(11, 18, 21, 0.10);
  text-align: center;
  font-size: 13px;
  color: var(--color-charcoal-meta);
}

.pr-fine__contact-link {
  color: var(--color-wood);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (hover: hover) {
  .pr-fine__contact-link:hover {
    color: var(--color-wood-dark);
  }
}

@media (min-width: 768px) {
  .pr-fine {
    padding: var(--space-20) var(--space-8);
  }
}

@media (min-width: 1024px) {
  .pr-fine {
    padding: var(--space-24) var(--space-10);
  }
}


/* ============================================================
   PRICING · 09 · SERVICE PIVOT (FINAL CTA)
   Horizontal divider rows — matches facility page pivot pattern.
   Reuses .final-cta charcoal base from components.css.
============================================================ */

.pr-pivot__services {
  list-style: none;
  padding: 0;
  margin: var(--space-10) auto 0;
  max-width: 720px;
  border-top: 1px solid rgba(248, 245, 237, 0.12);
}

.pr-pivot__service {
  border-bottom: 1px solid rgba(248, 245, 237, 0.12);
}

.pr-pivot__service-link {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  text-decoration: none;
  transition: opacity var(--speed-fast) var(--ease-out);
}

@media (hover: hover) {
  .pr-pivot__service-link:hover {
    opacity: 0.75;
  }
}

.pr-pivot__service-link:focus-visible {
  outline: 2px solid #F0A830;
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

.pr-pivot__service-name {
  font-size: 18px;
  font-weight: var(--weight-bold);
  color: var(--color-cream-warm);
  letter-spacing: -0.3px;
  flex-shrink: 0;
  min-width: 100px;
}

.pr-pivot__service-desc {
  flex: 1;
  font-size: 13px;
  color: var(--color-cream);
  opacity: 0.8;
  line-height: 1.4;
}

.pr-pivot__service-arrow {
  font-size: 18px;
  color: var(--color-wood);
  flex-shrink: 0;
  transition: transform var(--speed-fast) var(--ease-out);
}

@media (hover: hover) {
  .pr-pivot__service-link:hover .pr-pivot__service-arrow {
    transform: translateX(4px);
  }
}

@media (min-width: 768px) {
  .pr-pivot__services {
    max-width: 860px;
  }

  .pr-pivot__service-link {
    padding: var(--space-6) 0;
  }

  .pr-pivot__service-name {
    font-size: 26px;
    min-width: 160px;
  }

  .pr-pivot__service-desc {
    font-size: 16px;
  }

  .pr-pivot__service-arrow {
    font-size: 22px;
  }
}