/* =====================================================================
pages/product.css: Membership page blocks (/product)
---------------------------------------------------------------------
Loaded on product.html only, AFTER the shared design system:
Same conventions as pds.css: every class starts "pds-", tokens come
from pds.css section 1, no inline styles, no url() images. Membership
classes start "pds-mem-". Breakpoints match pds.css: 1180, 1023
(tablet), 640, 500 (phone).
The page is mostly shared components, reused unchanged:
page hero .pds-org-hero (8.1): H1, purple benefit line, lede
reassurance .pds-micro (6.2)
phone mock .pds-phone, .pds-msg (6.7)
step tiles .pds-tiles / .pds-tile (6.18) + .pds-steps (6.23)
feature cards .pds-bento / .pds-feature + the .pds-thread mock
and the hub visuals (6.7, 6.8)
closing lines .pds-statement (6.17)
chips .pds-chips (8.8)
results panel .pds-panel-dark, .pds-stats, .pds-trust (6.9) in
the Home .pds-results section (7)
reviews .pds-partner-grid + .pds-reviews (8.6)
FAQ .pds-faq, .pds-acc (6.14, 8.10), with links in
the answers (6.14; was P6 here until Contact)
final CTA .pds-cta-band--pets (6.15)
What lives here is only what Membership adds (in page order):
P1 Hero visual: now pds.css 8.11 (.pds-photo-hero)
P2 How it works: section spacing (the numbered tiles are pds.css 6.23)
P3 What's included: check-in mock, .pds-checkin
section spacing
P4 Help for every stage: topic chips .pds-chips--lg (SHARED CANDIDATE)
P5 Trainers and results: the link .pds-mem-results
P5b Reviews: the featured quote .pds-mem-reviews
"SHARED CANDIDATE" blocks are written generically, so they can move
into pds.css (section 6) as soon as a second page needs them.
===================================================================== */
/* ---------------------------------------------------------------------
P1. Hero visual: moved into pds.css 8.11 (.pds-photo-hero) on
2026-10-30, when the partner landing pages became its second user.
Membership's photo: a tan dog in a lavender collar and a cat in a red
collar on a bookshelf (research/image-credits.md), cropped so the
phone covers only the bookshelf edge.
--------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
P2. How it works: four numbered steps
The numbered step tiles moved into pds.css 6.23 (.pds-steps /
.pds-step) on 2026-10-22, when Powered by Petcademy became the second
page to use them. Only Membership's section spacing stays here.
--------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
P3. What's included: the 2 × 2 feature cards with mocks
The cards are the shared .pds-bento / .pds-feature (pds.css 6.8) on a
purple 50 band: cards 1 and 4 with text-thread mocks, untagged (6.7
.pds-thread), cards 2 and 3 with Pet Parent Hub visuals (6.7
.pds-vidwall, .pds-album), then the plan-split statement (6.17)
and the link to Pricing. Membership adds:
- .pds-checkin: card 4's mock, a text thread with one check-in
message and a reply box (built from .pds-thread and the phone's
composer, pds.css 6.7).
--------------------------------------------------------------------- */
.pds-mem-included .pds-sec-head { max-width: 860px; } /* the keyword H2 on two even lines */
.pds-mem-included .pds-statement { max-width: 1060px; } /* the plan split on one line on laptops */
.pds-mem-included .pds-sec-foot { margin-top: 32px; }
.pds-checkin .pds-thread__body { padding-bottom: 14px; }
.pds-checkin .pds-msg { max-width: 82%; }
.pds-checkin .pds-phone__composer { margin: 4px 18px 18px; font-size: .9em; }
/* ---------------------------------------------------------------------
P4. Help for every stage: the topic chips (SHARED CANDIDATE)
Twelve everyday topics as a plain list (
), not links or buttons
(copy doc: they could link to blog posts later). The A9 chip style
(.pds-chips, pds.css 8.8), one size up, because here the chips are the
content rather than a footnote. The vet statement follows (6.17), then
the link to the blog. The section's bottom padding is shorter, so the
results panel follows closely.
--------------------------------------------------------------------- */
.pds-chips--lg { gap: 14px; max-width: 1040px; margin: 0 auto; justify-content: center; }
.pds-chips--lg li {
gap: 12px; min-height: 64px; padding: 0 24px 0 12px; font-size: var(--pds-fs-body-lg); font-weight: 700;
box-shadow: var(--pds-shadow-sm);
}
.pds-chips__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--pds-lav); color: var(--pds-purple-700); }
.pds-chips__icon .pds-i { width: 22px; height: 22px; }
.pds-mem-stages .pds-sec-foot { margin-top: 28px; }
/* The vet note is a quiet aside here, so the pills stay the focus: smaller than the shared statement bar */
.pds-mem-stages .pds-statement { max-width: 640px; margin: 28px auto 0; gap: 12px; padding: 10px 16px; background: transparent; border-color: var(--pds-line); font-size: var(--pds-fs-meta); font-weight: 400; }
.pds-mem-stages .pds-statement__icon { width: 28px; height: 28px; background: var(--pds-mist); }
.pds-mem-stages .pds-statement__icon .pds-i { width: 15px; height: 15px; }
@media (max-width: 500px) {
.pds-chips--lg { gap: 8px; }
.pds-chips--lg li { gap: 10px; min-height: 52px; padding: 0 16px 0 8px; font-size: var(--pds-fs-meta); }
.pds-chips__icon { width: 34px; height: 34px; }
.pds-chips__icon .pds-i { width: 18px; height: 18px; }
}
/* ---------------------------------------------------------------------
P5. Trainers and results: the Home results panel (pds.css 6.9 and 7,
.pds-results), with "Meet our team →" under the trust line.
The trust line is a
here (it holds two paragraphs: the line and
the link).
--------------------------------------------------------------------- */
.pds-mem-results { padding-bottom: 0; } /* the white reviews section follows; its own top padding is the gap */
.pds-mem-results .pds-trust__text p + p { margin-top: 16px; }
/* ---------------------------------------------------------------------
P5b. Reviews: the featured quote (pds.css 8.6, .pds-reviews)
A short featured review in the tall featured card (it spans the two
cards beside it) sits in the middle of the space above the name line
instead of leaving a gap under it. When the card is only as tall as its content (tablets and
phones), the padding keeps the quote clear of the name line.
--------------------------------------------------------------------- */
.pds-mem-reviews .pds-partner--featured blockquote { margin-block: auto; padding-bottom: 32px; }