/* ===================================================================== pages/solutions.css: the organization-page template (rounds 2–4) --------------------------------------------------------------------- Used by every /solutions/* page (Rescues & Shelters is the first of nine). Load it 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. Breakpoints match pds.css: 1240, 1180, 1023, 900, 770, 640, 500. What lives here: the organization-page blocks Katie's feedback redesigned in rounds 2–4. The other blocks (hero, trusted-by strip, key benefits row, results panel, How Petcademy helps, partner quotes, the tab bar, the set-up points and chips, the ROI panel shell, FAQ) are in pds.css section 8, and the shared components these pages use (the equal tiles, the mid-page and final CTA bands) are in pds.css section 6. They are reused unchanged or adjusted below. Round 4 promoted the blocks that were marked "SHARED CANDIDATE" here into pds.css: .pds-benefit-row (8.2), .pds-tiles / .pds-tile / --3 / __icon (6.18), .pds-cta-band--mid / __line (6.15) and .pds-chips__link / __more (8.8). Site-wide rules respected: subtitles under titles (.pds-sec-head), no coloured side-bar callouts, equal tiles for equal items, a compact challenge (no photos), lean copy, full-width centred final CTA (.pds-cta-band). Page order (round 4, Katie approved 2026-10-10; research/org-page-order.md): 1 Hero · 2 Logo trust bar · 3 Key benefits (plain copy, no heading) · 4 Results that matter · 5 The challenge (3 compact tiles) · 6 How Petcademy helps, ending in the mid-page "Book a demo" band · 7 What you get (tabs) · 8 Video (Rescues & Shelters ONLY) · 9 What partners are saying · 10 Get set up · 11 Budget · 12 FAQ · 13 Final CTA (10 and 11 were one "Easy to start" panel from round 4 until 2026-10-20, when Katie split them back apart) Contents (in page order) S0 Logo trust bar: one row on laptops .pds-trusted__row (the card: pds.css 8.1) S1 Key benefits: now pds.css 8.2 (.pds-benefit-row) S3 Results that matter: rating cell, footnote link .pds-bignum__unit--of .pds-results-sec S4 The challenge: section spacing .pds-sol-challenge (tiles: pds.css 6.18, .pds-tiles--3) S5 How Petcademy helps + mid-page demo band .pds-helps .pds-helps--band (band: pds.css 6.15, --mid) S6 What you get: one-column features, wide visual .pds-ftabs__stage .pds-phone__brand .pds-ftabs__plan (the features: pds.css 8.7) .pds-ftabs__plan-code .pds-ftabs__flow S2 Video (R&S only): section spacing .pds-sol-video (the player: pds.css 6.19, .pds-embed) S10 What partners are saying: a borrowed quote .pds-partner__from S8 Integrations link chip: now pds.css 8.8 (.pds-chips__link) S7 Budget: price + worked example .pds-roi--price .pds-calc (Rescues & Shelters) (Numbers are kept from earlier rounds so the HTML comments still point at the right block. Round 4 removed S7, the separate budget block, and the round-3 photo cards from S4. 2026-10-20 (Katie): the round-4 "Easy to start" panel had too much going on, so every org page splits it back into Get set up (pds.css 8.8) and Budget (S7, restored); the merged panel's .pds-start rules are gone.) ===================================================================== */ /* ---- S0 Logo trust bar: one row on laptops --------------------------- The card itself is pds.css 8.1 (Rescues & Shelters only). From 1024px up its logos sit in one flex row that never wraps: seven logos are wider than the row on small laptops, so they may give up width (each keeps its shape: object-fit), never overflowing the card. Below 1024px pds.css lays the strip out as even rows of three. */ @media (min-width: 1024px) { .pds-trusted .pds-trusted__row { flex-wrap: nowrap; } .pds-trusted .pds-logo-item { flex: 0 1 auto; min-width: 0; } .pds-trusted .pds-logo-item a { max-width: 100%; } .pds-trusted .pds-logo-item--wide img { max-width: min(150px, 100%); } .pds-trusted .pds-logo-item--long img { max-width: min(200px, 100%); } .pds-trusted .pds-logo-item--round img { max-width: min(80px, 100%); } } /* ---- S1 Key benefits: plain copy above Results ----------------------- Promoted to pds.css 8.2 (.pds-benefit-row) in round 4: 4 plain-copy lines (bold label + one line), NO heading, directly above the Results panel. No page-only rules. */ /* ---- S3 Results that matter: the rating cell ------------------------- The panel itself is pds.css 8.3. The 4th cell on every organization page is "4.8/5 average rating from pet parents"; its "/5" is smaller than a "%" so the 4.8 leads. Results comes straight after the hero and the key benefits, so its section uses .pds-section--tight-top. Round 4: a slightly shorter bottom gap, so the dark panel leads straight into the compact challenge band below. */ .pds-bignum__unit--of { font-size: .5em; letter-spacing: -.02em; } .pds-results-sec { padding-bottom: calc(var(--pds-section-y) * .75); } /* A link in the footnote (Pet-Friendly Housing: "rescue and shelter partnerships"): white and underlined in teal on the purple 900 panel, like the featured quote card's links (pds.css 8.6) */ .pds-bignums__foot .pds-footnote a { --pds-link: #fff; --pds-link-line: underline; font-weight: 500; text-decoration-color: rgba(3, 218, 198, .8); text-underline-offset: 3px; } .pds-bignums__foot .pds-footnote a:hover { text-decoration-color: currentColor; } .pds-bignums__foot .pds-footnote a:focus-visible { outline-color: var(--pds-focus-on-dark); } /* ---- S4 The challenge: 3 compact equal tiles (round 4) --------------- Katie, round 4: short and scannable, the same treatment as the Home "Everything you need, in one membership" snapshot. No photos, no closing line, no boxed or side-bar callout. Markup: the shared equal tiles (pds.css 6.18) with the 3-across icon variant: Only the section's own spacing lives here. The section is purple 50, which is why --3 tiles are white. */ .pds-sol-challenge { padding-block: calc(var(--pds-section-y) * .78); } /* The H2 runs on one line on desktop (the default 780px head would wrap it to two); the intro keeps a readable measure under it. */ .pds-sol-challenge .pds-sec-head { max-width: none; } .pds-sol-challenge .pds-sec-head .pds-lede { max-width: 780px; } /* ---- S5 How Petcademy helps + the mid-page "Book a demo" band --------- The round-1 layout (pds.css 8.5, unchanged): .pds-program lavender panel: "What every family gets" (H3, intro, .pds-checks list) + a brand illustration .pds-caretypes three white cards, "How it helps [group]" Round 4: the section ENDS with the mid-page "Book a demo" band, which carries the section's one-line result. Only small adjustments live here, then the band. */ .pds-helps .pds-program__list li { text-wrap: pretty; } .pds-helps .pds-caretype__head .pds-h3 { text-wrap: pretty; } /* "How it helps families considering surrender" is long, so below 1180px three cards in a row get too narrow for their titles. The cards stack instead: from 1180 to 901px each card is a row (icon + title on the left, the line on the right); from 900px down the title sits over the line. */ @media (max-width: 1180px) { .pds-helps .pds-caretypes { grid-template-columns: 1fr; gap: 12px; } .pds-helps .pds-caretype { grid-row: auto; grid-template-rows: none; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); align-items: center; column-gap: 40px; } } @media (max-width: 900px) { .pds-helps .pds-caretype { grid-template-columns: 1fr; align-items: start; row-gap: 10px; } } /* The mid-page band (pds.css 6.15, .pds-cta-band--mid) is the last thing in this section, full width: one line (the section's result), then one teal "Book a demo". The deep purple strip also separates the white How Petcademy helps from the white What you get. Only its placement lives here. */ .pds-helps--band { padding-bottom: 0; } /* the band is the section's bottom edge */ .pds-helps .pds-cta-band--mid { margin-top: calc(var(--pds-section-y) * .8); } /* ---- S6 What you get: one-column features, wide visual (round 3) ------ The tab bar is unchanged (pds.css 8.7, Katie loves it). Each panel is: H3 + one short intro line + compact features (icon, title, one line) in ONE column on the left, and ONE light visual in a fixed-height "stage" on the right. Round 3 swaps the proportions to about 40 / 60: less copy space, more image space. Every stage is the same height, so switching tabs doesn't make the page jump. */ .pds-ftabs .pds-ftabs__panel:not([hidden]) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(32px, 4vw, 64px); } .pds-ftabs__copy .pds-ftabs__intro { margin-top: 10px; max-width: 44ch; text-wrap: pretty; } .pds-ftabs__stage { position: relative; display: grid; place-items: center; height: 560px; padding: 12px; overflow: hidden; border-radius: var(--pds-r-media); border: 1px solid var(--pds-line); background: radial-gradient(520px 360px at 50% 42%, #fff 0%, transparent 70%), linear-gradient(160deg, var(--pds-lav) 0%, var(--pds-mist) 100%); } /* The 800 × 800 brand art has wide built-in margins, so it fills the stage's padded box (absolutely, so the image's natural 800px height can never stretch the stage); the stage's extra width gives it air. */ .pds-ftabs__stage > img { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); object-fit: contain; } /* A partner's own brand mark in the phone mock's header, in place of the Petcademy icon (Rehoming tab 5, the white-label MOCK): a generic disc with a line icon, so no real brand is implied. */ .pds-phone__brand { display: grid; place-items: center; width: 3em; height: 3em; border-radius: 50%; background: var(--pds-teal-50); color: var(--pds-teal-900); } .pds-phone__brand .pds-i { width: 1.6em; height: 1.6em; } /* A partner's plan card with Petcademy as one of its benefits (Lost Pet Services tab 3, a MOCK in a sample brand): a white card with the generic brand mark above, the plan's benefits as the shared ticks (.pds-checks), and the Petcademy benefit picked out on lavender. */ .pds-ftabs__plan { width: min(100%, 340px); padding: 24px 24px 20px; border-radius: var(--pds-r-card); background: #fff; border: 1px solid var(--pds-line); box-shadow: var(--pds-shadow-md); } .pds-ftabs__plan-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--pds-line); font-size: 14px; line-height: 1.3; } .pds-ftabs__plan-head strong { display: block; font-size: var(--pds-fs-body-lg); color: var(--pds-deep); } .pds-ftabs__plan-head small { display: block; margin-top: 2px; font-size: var(--pds-fs-small); color: var(--pds-muted); } .pds-ftabs__plan .pds-checks { gap: 8px; font-size: var(--pds-fs-meta); } .pds-ftabs__plan .pds-checks li { padding: 6px 10px; } .pds-ftabs__plan .pds-checks .pds-ftabs__plan-pick { margin-top: 4px; border-radius: var(--pds-r-chip); background: var(--pds-lav); font-weight: 700; } @media (max-width: 640px) { /* the shorter phone stage: a more compact card, clear of the MOCK tag */ .pds-ftabs__plan { padding: 18px 18px 14px; } .pds-ftabs__plan-head { margin-bottom: 10px; padding-bottom: 12px; } .pds-ftabs__plan .pds-checks { gap: 2px; font-size: var(--pds-fs-small); } } /* A sign-up link and code at the foot of the same card (Veterinarians tab 3, a MOCK clinic sign-up card): two label / value rows on lavender, like the picked benefit. */ .pds-ftabs__plan-code { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; align-items: baseline; margin: 14px 0 0; padding: 14px 16px; border-radius: var(--pds-r-chip); background: var(--pds-lav); line-height: 1.35; } .pds-ftabs__plan-code dt { font-size: var(--pds-fs-caption); color: var(--pds-muted); } .pds-ftabs__plan-code dd { margin: 0; font-size: var(--pds-fs-meta); font-weight: 700; color: var(--pds-deep); overflow-wrap: anywhere; } @media (max-width: 640px) { .pds-ftabs__plan-code { margin-top: 10px; padding: 10px 12px; } } /* A simple three-step diagram (Veterinarians tab 4, "Where Petcademy fits", tagged MOCK): white step cards, each an icon tile (pds.css 6.1) and a title with one line, joined by short downward arrows. */ .pds-ftabs__flow { width: min(100%, 360px); } .pds-ftabs__flow ol { display: grid; gap: 30px; margin: 0; padding: 0; list-style: none; } .pds-ftabs__flow li { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--pds-r-card); background: #fff; border: 1px solid var(--pds-line); box-shadow: var(--pds-shadow-md); line-height: 1.3; } .pds-ftabs__flow li + li::before { /* the arrow's line, then its head */ content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 20px; margin: 0 0 6px -1px; background: var(--pds-purple-300); } .pds-ftabs__flow li + li::after { content: ""; position: absolute; left: 50%; bottom: 100%; margin: 0 0 3px -6px; border: 6px solid transparent; border-top-color: var(--pds-purple-300); border-bottom-width: 0; } .pds-ftabs__flow strong { display: block; font-size: var(--pds-fs-body-lg); color: var(--pds-deep); } .pds-ftabs__flow small { display: block; margin-top: 3px; font-size: var(--pds-fs-small); color: var(--pds-muted); } @media (max-width: 640px) { .pds-ftabs__flow ol { gap: 22px; } .pds-ftabs__flow li { gap: 12px; padding: 10px 14px; } .pds-ftabs__flow li + li::before { height: 13px; margin-bottom: 5px; } .pds-ftabs__flow li + li::after { margin-bottom: 2px; } .pds-ftabs__flow .pds-icon-tile { width: 40px; height: 40px; border-radius: var(--pds-r-chip); } /* the --sm size */ .pds-ftabs__flow .pds-icon-tile .pds-i { width: 20px; height: 20px; } .pds-ftabs__flow strong { font-size: 1rem; } .pds-ftabs__flow small { font-size: var(--pds-fs-caption); } } /* Tab 1: a phone with one exchange, plus one floating status chip beside it */ .pds-ftabs__stage--phone { padding-top: 48px; } .pds-ftabs__stage--phone::before { /* lavender blob behind the phone */ content: ""; position: absolute; left: 50%; top: 55%; width: 400px; height: 400px; transform: translate(-50%, -50%); border-radius: var(--pds-blob); background: var(--pds-purple-100); opacity: .42; /* the hero blob (pds.css 4) */ } .pds-ftabs__device { position: relative; } .pds-ftabs__phone { font-size: 11.4px; } /* about 245 × 445 px */ .pds-ftabs__phone .pds-msg { font-size: 1.12em; max-width: 86%; } /* The status chip sits to the left of the phone, over its empty upper chat area, never over a message. */ .pds-ftabs__float { position: absolute; z-index: 2; left: -160px; top: 128px; } .pds-ftabs__float small { white-space: nowrap; } @media (max-width: 1240px) { .pds-ftabs__float { left: -112px; } } @media (max-width: 1023px) { .pds-ftabs .pds-ftabs__panel:not([hidden]) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px; } .pds-ftabs__stage { height: 460px; } .pds-ftabs__stage--phone { padding-top: 44px; } .pds-ftabs__stage--phone::before { width: 300px; height: 300px; } .pds-ftabs__phone { font-size: 9.4px; } /* about 202 × 366 px */ .pds-ftabs__float { left: -62px; top: 104px; } } @media (max-width: 770px) { /* stacked: copy, then the visual at full width */ .pds-ftabs .pds-ftabs__panel:not([hidden]) { grid-template-columns: 1fr; gap: 28px; } .pds-ftabs__stage { width: 100%; height: 440px; } .pds-ftabs__float { left: -150px; } } @media (max-width: 640px) { .pds-ftabs__stage { height: 360px; padding: 44px 16px 16px; } .pds-ftabs__stage--phone::before { width: 230px; height: 230px; } .pds-ftabs__phone { font-size: 7.6px; } /* 163 × 296 px */ .pds-ftabs__float { left: -84px; top: 92px; padding: 10px 14px 10px 10px; } } /* ---- S2 Video: section spacing (RESCUES & SHELTERS ONLY) -------------- R&S only — not part of the org-page template. The other eight pages leave the section (and these rules) out. The player itself is the shared .pds-embed (pds.css 6.19, moved from here when About became the second page to use it). Round 4: directly below What you get ("see it in action"), on the same white background, so it has no top padding of its own: the gap is What you get's bottom padding, and the two read as one story. */ .pds-sol-video { overflow: hidden; padding-top: 0; } .pds-sol-video .pds-sec-head .pds-lede { margin-top: 12px; } /* ---- S8 Integrations: "See all integrations →" as the last chip -------- Promoted to pds.css 8.8 (.pds-chips__more / .pds-chips__link) in round 4. No page-only rules. */ /* ---- S7 Budget: price + worked example ------------------------------- Restored 2026-10-20 (Katie): set-up and budget are two sections again on every org page, as in round 3 (the round-4 "Easy to start" panel had too much going on in one block). The panel and its teal 50 figures are pds.css 8.9: the copy on the left, two figures on the right. No button (the final CTA is the page's one call to action). The worked example is a small sum in an outlined panel (600 × $2 = $1,200 on R&S), never a side-bar callout; a page leaves it out until its pricing is confirmed. No coloured side bar. */ .pds-roi--price .pds-roi__copy { display: flex; flex-direction: column; justify-content: center; } .pds-calc { margin-top: 30px; padding: 22px 26px 20px; border-radius: 18px; background: var(--pds-mist); border: 1px solid var(--pds-line); } .pds-calc__label { font-size: var(--pds-fs-small); font-weight: 700; line-height: 1.4; color: var(--pds-purple-700); } .pds-calc__sum { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 18px; margin-top: 14px; } .pds-calc__term { display: flex; flex-direction: column; } .pds-calc__term b { font-size: clamp(1.875rem, 1.45rem + 1.1vw, 2.5rem); font-weight: 700; line-height: 1; letter-spacing: -.035em; color: var(--pds-deep); font-variant-numeric: tabular-nums; } .pds-calc__term small { margin-top: 6px; font-size: var(--pds-fs-caption); font-weight: 500; color: var(--pds-muted); } .pds-calc__term--total b { color: var(--pds-action); } .pds-calc__result { display: flex; align-items: flex-start; gap: 18px; } /* "= $1,200" never splits across lines */ .pds-calc__op { font-size: clamp(1.5rem, 1.3rem + .6vw, 1.875rem); font-weight: 400; line-height: 1.1; color: var(--pds-muted-2); } .pds-calc__note { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--pds-line); font-size: var(--pds-fs-meta); line-height: 1.5; color: var(--pds-deep); } @media (max-width: 500px) { .pds-roi--price .pds-roi__copy { padding: 32px 22px 26px; } .pds-calc { margin-top: 24px; padding: 18px 18px 16px; } .pds-calc__sum, .pds-calc__result { gap: 10px 12px; } } /* ---- S10 What partners are saying: a borrowed quote's label ------------ The partner quotes are pds.css 8.6. A page without a quote of its own never shows an invented one. */ /* A borrowed quote's source, labelled on its card (Pet-Friendly Housing: "From a rescue partner" on the featured card): a quiet eyebrow (pds.css 5) just above the quote. The section carries .pds-reviews (pds.css 8.6), which keeps the featured card's label and quote together at the top and the name line at the bottom.

From a rescue partner

*/ .pds-partner__from { margin-bottom: 16px; }