/* =====================================================================
   pds.css: the Petcademy design system
   ---------------------------------------------------------------------
   ONE shared stylesheet for every page of the prototype. It is the
   reference for the full site build (the code Phil hosts), so it is
   written to be read: tokens first, then components, then page blocks.

   Conventions
   - Every class starts "pds-", every custom property "--pds-". State
     classes are "pds-is-…": pds-is-collapsed and pds-is-enhanced (set by
     pds.js).
   - Everything is scoped under ".pds" (here <body class="pds">), so
     the reset and global rules never leak into anything else.
   - No inline style="" anywhere: percentages, bar heights and other
     mock values are classes in this file.
   - Images are plain <img> elements or CSS gradients. No url() masks or
     backgrounds: Chrome blocks those on pages opened straight from disk
     (file://), which is how the prototype is reviewed.
   - Photos and illustrations are WebP, at twice their largest on-screen
     size, beside their PNG/JPG masters (which no page loads); give every
     <img> a width and height (SEO audit, research/seo-audit.md).
   - Breakpoints: 1240 (nav squeeze, audience rail single row),
     1180 (hero + rail, reviews, the Home org teaser and the mega menu re-flow),
     1023 (mobile menu), 900 (card rows and the 3-up tiles stack),
     770 (tablet), 640 (plan cards), 500 (phone).
     min-width queries pair with them (1024, 641, 501).
     Plus a short-viewport rule for the Home hero (max-height 800)
     and local ones: 1340 and 860 (audience rail) and 374 (the narrowest
     phones: Home hero chips, photo hero).

   Site-wide design rules (Katie, research/brief.md "Design rules"),
   built into the shared components so no page can break them:
   - Section headers stack: the subtitle always sits UNDER its title
     (.pds-sec-head has no side-by-side variant).
   - No coloured side-bar callouts (a box or quote with a thick coloured
     left border). A closing line uses .pds-statement (6.17) instead.
   - Final CTAs are the full-width, centre-aligned .pds-cta-band (6.15).
   - Eyebrows, pills and breadcrumbs are quiet: no icon, small text
     (.pds-eyebrow, .pds-crumbs in section 5).

   Contents
     1. Tokens
     2. Base (scoped to .pds; the self-hosted Roboto)
     3. Utilities
     4. Layout (incl. the section header and the hero surface)
     5. Type (incl. quiet eyebrow, pill, breadcrumb)
     6. Components
        6.1  Icons            6.10 Ratings + reviews
        6.2  Buttons + links  6.11 Logos
        6.3  Placeholders     6.12 (retired)
        6.4  Header + nav     6.13 Plans
             + mega menu      6.14 Accordion + tabs
        6.5  Mobile menu      6.15 Final CTA band (full width, centred;
        6.6  Audience rail         the pets over the footer; --mid)
             + chip cloud     6.16 Footer
        6.7  Product mocks    6.17 Statement (closing line)
        6.8  Cards            6.18 Equal tiles (+ --3 icon variant)
        6.9  Stats            6.19 Video embed
                              6.20 Page header (centred, no visual)
                              6.21 Legal text
                              6.22 Full plan card
                              6.23 Numbered steps
     7. Page blocks: Home
     8. Page blocks: Solutions (template for all 9 organization pages)
    10. Motion
   ===================================================================== */


/* =====================================================================
   1. TOKENS
   ===================================================================== */
:root {
  /* ---- Brand palette: the official Petcademy guidelines (Katie, 2026-10-10; research/brief.md "Brand") ----
     Purple 700 is the primary colour; teal is secondary, used when a second colour helps tell things
     apart (e.g. a teal button on a purple background). There is NO yellow and no other accent colour.
     (Partner brands keep their own colours: research/brief.md "Brand".)
     Text rules: 900–500 backgrounds take white text, 200–50 backgrounds take dark text, and nothing is
     ever written on 400 or 300. WCAG overrides where the two disagree: white on teal 700 is 4.4:1 and
     white on teal 500 is 3.2:1 (both under AA for body-size text), so neither carries white text. The teal
     button on purple is teal 200 with a purple 900 label (9.2:1). */
  --pds-purple-900: #23036A;  /* logo, heading text, dark sections, footer */
  --pds-purple-800: #30009C;  /* primary button hover (darker) */
  --pds-purple-700: #3700B3;  /* PRIMARY: buttons, links, accents (11.6:1 with white) */
  --pds-purple-600: #5600E8;
  --pds-purple-500: #6200EE;  /* decorative fills (chart bars) */
  --pds-purple-400: #7F39FB;  /* decorative only, never behind text: dashed placeholder outlines */
  --pds-purple-300: #985EFF;  /* decorative only, never behind text */
  --pds-purple-200: #BB86FC;
  --pds-purple-100: #DBB2FF;  /* labels on purple 900 (9.2:1); small fills behind dark text */
  --pds-purple-50: #F2E7FE;   /* light backgrounds: sections, panels, icon tiles */
  --pds-teal-900: #005457;    /* teal text and icons on white / teal 50 (8.7:1 / 7.9:1) */
  --pds-teal-800: #017374;    /* teal text on white (5.7:1): ratings, "Replied" */
  --pds-teal-700: #018786;    /* secondary accent on light: check discs, stars (4.4:1 on white, 3.7:1 on purple 50) */
  --pds-teal-600: #019592;
  --pds-teal-500: #01A299;    /* fills behind purple 900 icons/text only (5.1:1); white on it fails */
  --pds-teal-400: #00B3A6;    /* decorative only, never behind text */
  --pds-teal-300: #00C4B4;    /* decorative only, never behind text */
  --pds-teal-200: #03DAC6;    /* accent ON PURPLE: the teal button, stat units, stars, arrows, badges, focus ring (9.2:1 on purple 900) */
  --pds-teal-100: #70EFDE;
  --pds-teal-50: #C8FFF4;     /* light teal background: ROI figures, small chips */

  /* ---- Neutrals (not in the palette; kept for contrast and listed in DECISIONS.md #13) ----
     White is written #fff throughout (house style; no token). */
  --pds-muted: #5B5670;       /* body/secondary text (7.0:1 on white, 5.9:1 on purple 50) */
  --pds-muted-2: #6E6887;     /* placeholder text inside mocks (5.3:1 on white) */
  --pds-grey-100: #EEEEEE;    /* hairlines inside product mocks */
  /* Forms (Contact, 2026-10-14). The palette has no red, so errors use the error colour of the Material
     baseline scheme the palette comes from (its purple 500/700 and teal 200/700 are the same hexes). */
  --pds-error: #B00020;                         /* error text, icons and borders (7.3:1 on white) */
  --pds-field-line: rgba(35, 3, 106, .5);       /* text-field borders: purple 900 at 50% (3.5:1 on white, WCAG 1.4.11) */

  /* ---- Roles: what components use. Each one points at the palette above. ---- */
  --pds-deep: var(--pds-purple-900);           /* heading text, dark sections, footer */
  --pds-action: var(--pds-purple-700);         /* primary buttons, text links, accents */
  --pds-action-hover: var(--pds-purple-800);
  --pds-accent: var(--pds-teal-700);           /* secondary accent on light backgrounds (white icon on it) */
  --pds-accent-on-dark: var(--pds-teal-200);   /* secondary accent on purple (purple 900 icon/text on it) */
  --pds-lav: var(--pds-purple-50);             /* small fills INSIDE white cards and mocks: chat bubbles, meters, menu icons */
  --pds-mist: var(--pds-purple-50);            /* light section background */
  /* Small fills that sit straight on a section or panel: icon tiles, statement icon discs, the FAQ "+".
     Every surface sets it (section 4 and the cards/panels below): purple 50 on white, WHITE on purple 50
     (.pds-section--mist, .pds-statement, .pds-program), so a purple 50 tile never vanishes on purple 50. */
  --pds-tint: var(--pds-purple-50);
  --pds-line: rgba(55, 0, 179, .14);           /* hairline borders + dividers: purple 700 at 14% */
  --pds-underline: rgba(55, 0, 179, .45);      /* the underline of a link in body text: purple 700 at 45% */
  --pds-dot: rgba(35, 3, 106, .10);            /* the light panels' dot grid: purple 900 at 10% */
  --pds-on-dark: rgba(255, 255, 255, .82);     /* secondary text on purple 900 (11:1) */
  --pds-on-dark-label: var(--pds-purple-100);  /* small labels on purple 900 (9.2:1) */
  --pds-line-dark: rgba(255, 255, 255, .14);
  --pds-night: var(--pds-purple-900);          /* device bezels */
  --pds-ph-line: var(--pds-purple-400);        /* dashed placeholder outline (5.4:1 on white) */
  /* Hero background, shared by the Home and organization-page heroes: square, edge to edge */
  --pds-grad-hero:
    radial-gradient(900px 520px at 80% 14%, rgba(219, 178, 255, .5), transparent 62%),
    radial-gradient(600px 420px at 100% 92%, rgba(3, 218, 198, .14), transparent 60%),
    linear-gradient(180deg, #fff 0%, var(--pds-purple-50) 100%);

  /* ---- Type (Roboto only) ---- */
  --pds-font: "Roboto", "Roboto Fallback", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; /* section 2 */
  --pds-fs-display: clamp(2.5rem, 1.1rem + 3.6vw, 4.25rem);   /* 40 → 68: Home H1 */
  --pds-fs-h1: clamp(2.25rem, 1.2rem + 2.9vw, 3.5rem);        /* 36 → 56: Solutions H1 */
  --pds-fs-h2: clamp(2rem, 1.25rem + 2.3vw, 3.25rem);         /* 32 → 52 */
  --pds-fs-h3: clamp(1.25rem, 1.12rem + .45vw, 1.5rem);       /* 20 → 24 */
  --pds-fs-stat: clamp(2.75rem, 1.7rem + 2.7vw, 4rem);        /* 44 → 64: stat row, Pricing comparison */
  --pds-fs-stat-lg: clamp(2.25rem, 1rem + 4.1vw, 5.25rem);    /* 36 → 84: big numbers (8.3), Budget figures (8.9) */
  --pds-fs-lede: clamp(1.125rem, 1.02rem + .35vw, 1.3125rem); /* 18 → 21 */
  --pds-fs-body: clamp(1rem, .97rem + .12vw, 1.0625rem);      /* 16 → 17 */
  /* Fixed small sizes (no clamp): what card lines, labels and notes use */
  --pds-fs-body-lg: 1.0625rem;                                /* 17: card and list text, labels */
  --pds-fs-meta: .9375rem;                                    /* 15: secondary lines, chips, eyebrows, helper text */
  --pds-fs-small: .875rem;                                    /* 14 */
  --pds-fs-caption: .8125rem;                                 /* 13: footnotes, credentials, breadcrumbs */
  --pds-track-display: -.035em;
  --pds-track-h2: -.028em;
  --pds-track-h3: -.012em;

  /* ---- Layout ---- */
  --pds-container: 1296px;
  --pds-gutter: clamp(16px, 5vw, 72px);
  --pds-section-y: clamp(64px, 8.5vw, 128px);
  --pds-head-gap: clamp(32px, 4vw, 56px);
  --pds-head-gap-tight: clamp(28px, 3vw, 40px);   /* .pds-sec-head--tight: a header right above its content */
  --pds-grid-gap: clamp(16px, 1.7vw, 24px);
  --pds-header-h: 76px;

  /* ---- Shape (hero backgrounds are square, edge to edge: no hero radius) ---- */
  --pds-r-panel: 32px;
  --pds-r-media: 24px;
  --pds-r-card: 20px;
  --pds-r-md: 16px;
  --pds-r-sm: 14px;            /* icon tiles, logo boxes */
  --pds-r-chip: 12px;          /* small tiles, fields, chips */
  --pds-r-pill: 999px;
  --pds-blob: 46% 54% 60% 40% / 50% 42% 58% 50%; /* the soft blob behind hero pictures and mocks */

  /* ---- Elevation ---- */
  --pds-shadow-sm: 0 1px 2px rgba(35, 3, 106, .06), 0 2px 8px rgba(35, 3, 106, .05);
  --pds-shadow-md: 0 12px 32px rgba(35, 3, 106, .12);
  --pds-shadow-lg: 0 32px 64px -16px rgba(35, 3, 106, .30), 0 16px 32px -16px rgba(35, 3, 106, .24);
  --pds-shadow-rail: 0 24px 56px -12px rgba(35, 3, 106, .20), 0 2px 6px rgba(35, 3, 106, .05);
  --pds-shadow-device: 0 40px 80px -20px rgba(35, 3, 106, .48), 0 18px 36px -18px rgba(35, 3, 106, .38);

  /* ---- Focus ---- */
  --pds-focus: var(--pds-action);
  --pds-focus-on-dark: var(--pds-teal-200);    /* 9.2:1 on purple 900 */
}


/* =====================================================================
   2. BASE (scoped to .pds)
   ===================================================================== */
/* Roboto, self-hosted (SEO audit, 2026-10-31): the file Google Fonts serves (Roboto v51, Latin characters), one
   variable font for every weight the site uses (400–900); every page preloads it. Licence: SIL Open Font
   License 1.1. "Roboto Fallback" is Arial resized to Roboto's measurements: text drawn before Roboto arrives
   takes the same space, so nothing reflows when it swaps in (Android has no Arial; it falls through to its
   system font, which is Roboto). @font-face can't be scoped under .pds; these two family names are all it adds.
   Opened straight from disk (file://), Chrome logs a CORS error for each page's font preload; harmless, the
   font itself still loads (over http there's no error). */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/roboto-latin-variable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Sizes measured against the site's own text (2026-10-31): Arial at 99.6% and Arial Bold at 94% match Roboto's
   widths; the overrides are Roboto's ascent and descent (1900 and 500 of 2048) divided by that size. */
@font-face {
  font-family: "Roboto Fallback";
  font-weight: 400 600;
  src: local("Arial"), local("ArialMT");
  size-adjust: 99.6%;
  ascent-override: 93.15%;
  descent-override: 24.51%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Roboto Fallback";
  font-weight: 700 900;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 94%;
  ascent-override: 98.7%;
  descent-override: 25.97%;
  line-gap-override: 0%;
}

.pds, .pds *, .pds *::before, .pds *::after { box-sizing: border-box; }
.pds {
  font-family: var(--pds-font);
  font-size: var(--pds-fs-body);
  line-height: 1.6;
  color: var(--pds-muted);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.pds:where(body) { margin: 0; background: #fff; } /* prototype pages only */
/* Element resets carry one class of specificity (0,1,0), so they beat bare element rules from any
   other stylesheet; component classes further down still win (same or higher specificity, later). */
.pds :where(img) { max-width: 100%; display: block; }
.pds :where(ul) { list-style: none; margin: 0; padding: 0; }
.pds :where(p, h1, h2, h3, h4, figure, blockquote) { margin: 0; }
.pds :where(button) { font: inherit; color: var(--pds-link, currentColor); } /* a .pds-btn on a <button> takes --pds-link too */
/* Keep focused controls clear of the sticky header (WCAG 2.4.11), not only #anchor targets. */
:where(.pds) :is([id], a[href], button, [tabindex]) { scroll-margin-top: calc(var(--pds-header-h) + 16px); }
/* hidden="until-found" (closed FAQ answers, pds.js 3) is left to the browser, which keeps it findable with Ctrl+F;
   browsers that don't know it hide it like any [hidden]. */
.pds [hidden]:not([hidden="until-found"]) { display: none !important; }

/* ---- Links -------------------------------------------------------------
   No rule sets `color` or `text-decoration-line` on a link directly. A
   link class (or a class shared by links and buttons, like .pds-btn) sets
   --pds-link, plus --pds-link-line: underline if it is underlined, and
   the rule below applies them. With neither set, a link inherits the
   text colour around it and has no underline. */
.pds :where(a) { font-weight: inherit; }
.pds a[href] {
  color: var(--pds-link, currentColor);
  text-decoration-line: var(--pds-link-line, none);
}
.pds :focus-visible { outline: 3px solid var(--pds-focus); outline-offset: 3px; }
.pds-locked { overflow: hidden; } /* set on <html> and <body> by pds.js while the mobile menu is open */

.pds-skip {
  position: absolute; left: 16px; top: -100px; z-index: 200;
  background: var(--pds-deep); --pds-link: #fff; padding: 12px 18px; border-radius: var(--pds-r-chip);
  font-weight: 700;
}
.pds-skip:focus { top: 12px; }
/* Skip link target: the first section of every page carries id="content". */


/* =====================================================================
   3. UTILITIES
   ===================================================================== */
.pds-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pds-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.pds-nowrap { white-space: nowrap; }
/* Keeps a phrase in a heading on one line while it fits, and lets it wrap inside itself when it can't (a narrow
   phone with larger text spacing, WCAG 1.4.12), where .pds-nowrap would push the heading off the screen. */
.pds-keep { display: inline-block; max-width: 100%; }

/* Mock values without inline styles (progress bars, rating fill) */
.pds-pct-96 { width: 96%; }


/* =====================================================================
   4. LAYOUT
   ===================================================================== */
.pds-wrap { width: 100%; max-width: calc(var(--pds-container) + 2 * var(--pds-gutter)); margin: 0 auto; padding-inline: var(--pds-gutter); }
.pds-section { position: relative; padding-block: var(--pds-section-y); }
.pds-section--mist { background: var(--pds-mist); --pds-tint: #fff; } /* small fills turn white on purple 50 */
.pds-section--tight-top { padding-top: calc(var(--pds-section-y) * .6); }
.pds-section--tight-bottom { padding-bottom: calc(var(--pds-section-y) * .5); }

/* Hero surface: the square, edge-to-edge purple 50 panel every hero sits on (Katie, round 3: no rounded hero
   background on any page), with the faint dot grid faded toward its edges. One definition for the Home hero (7),
   the hero with a visual (8.1), the centred page header (6.20) and the 404 (.pds-hero-surface); the final CTA band
   (6.15) shares the dot grid. Each surface only says where the dots fade (--pds-dots-fade).
   The soft purple 100 blob behind a hero's picture is one shape too (.pds-blob, or a hero's own __glow class, which
   only places it). */
.pds-hero-surface, .pds-hero__panel, .pds-org-hero__panel, .pds-page-head {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--pds-grad-hero); /* tokens, section 1 */
  --pds-dots-fade: radial-gradient(ellipse 60% 70% at 72% 40%, #000 0%, transparent 75%); /* toward the picture on the right */
}
.pds-hero-surface::before, .pds-hero__panel::before, .pds-org-hero__panel::before, .pds-page-head::before, .pds-cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(var(--pds-dot) 1px, transparent 1.2px); background-size: 22px 22px;
  -webkit-mask-image: var(--pds-dots-fade); mask-image: var(--pds-dots-fade);
}
.pds-blob, .pds-hero__glow, .pds-org-hero__glow, .pds-photo-hero__glow {
  position: absolute; border-radius: var(--pds-blob); background: var(--pds-purple-100); opacity: .42;
}

/* Section header: eyebrow (optional) → H2 → lede, always stacked, so the subtitle
   sits UNDER the title on every page (site-wide rule). Left-aligned by default;
   --center centres the whole stack; --tight puts it closer to what follows. There is deliberately no
   side-by-side variant. */
.pds-sec-head { max-width: 780px; margin-bottom: var(--pds-head-gap); }
.pds-sec-head .pds-lede { margin-top: 18px; }
.pds-sec-head .pds-eyebrow + .pds-h2 { margin-top: 12px; }
.pds-sec-head--center { margin-inline: auto; text-align: center; }
.pds-sec-head--tight { margin-bottom: var(--pds-head-gap-tight); } /* the header sits close to what it introduces */
.pds-sec-head--center .pds-lede { margin-inline: auto; max-width: 62ch; }
.pds-sec-foot { margin-top: 40px; }
.pds-sec-foot--center { text-align: center; } /* a link centred under its section (Membership) */


/* =====================================================================
   5. TYPE
   ===================================================================== */
.pds-display {
  font-size: var(--pds-fs-display); font-weight: 700; line-height: 1.03;
  letter-spacing: var(--pds-track-display); color: var(--pds-deep);
}
.pds-display > span { display: block; }
.pds-display__accent { color: var(--pds-action); }
.pds-h1 { /* Solutions pages: "Petcademy for [Audience]" */
  font-size: var(--pds-fs-h1); font-weight: 700; line-height: 1.06;
  letter-spacing: var(--pds-track-display); color: var(--pds-deep); text-wrap: balance;
}
.pds-h2 {
  font-size: var(--pds-fs-h2); font-weight: 700; line-height: 1.08;
  letter-spacing: var(--pds-track-h2); color: var(--pds-deep); text-wrap: balance;
}
.pds-h2--on-dark { color: #fff; }
.pds-h3 {
  font-size: var(--pds-fs-h3); font-weight: 700; line-height: 1.25;
  letter-spacing: var(--pds-track-h3); color: var(--pds-deep);
}
.pds-lede { font-size: var(--pds-fs-lede); line-height: 1.55; color: var(--pds-muted); text-wrap: pretty; }
.pds-lede--strong { color: var(--pds-deep); font-weight: 500; }
.pds-lede--on-dark { color: var(--pds-on-dark); }
.pds-small { font-size: var(--pds-fs-small); line-height: 1.5; }
.pds-footnote { font-size: var(--pds-fs-caption); line-height: 1.5; color: var(--pds-muted); }

/* ---- Quiet labels (site-wide rule: no icon, small text) ----------------
   They support the headline, never compete with it.
   - .pds-eyebrow: plain text label above a section H2.
   - .pds-crumbs: breadcrumb (organization pages): plain small text, no box,
     so it is quieter still than the pill.
   Never put an icon, dot or badge inside any of them. */
.pds-eyebrow {
  display: block; font-size: var(--pds-fs-meta); font-weight: 700; line-height: 1.4; letter-spacing: .01em; /* 15px (13px until 2026-10-30: too small to read, Bailey and Katie) */
  color: var(--pds-purple-700);
}
.pds-eyebrow--on-dark { color: var(--pds-on-dark-label); }

/* Breadcrumb: <nav class="pds-crumbs" aria-label="Breadcrumb"><ol><li><a>…</a></li><li><span aria-current="page">…</span></li></ol></nav>
   Plain 13px text: a purple link, a faint chevron, the current page in muted grey. No pill, no icon. */
.pds-crumbs { margin-bottom: 18px; }
.pds-crumbs ol {
  display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none;
  font-size: var(--pds-fs-caption); font-weight: 500; line-height: 1.4; letter-spacing: .01em; color: var(--pds-muted); /* 13px */
}
.pds-crumbs li { display: inline-flex; align-items: center; }
.pds-crumbs li + li::before { /* small chevron separator */
  content: ""; width: 5px; height: 5px; margin: 0 9px 0 6px; opacity: .5;
  border-top: 1.25px solid currentColor; border-right: 1.25px solid currentColor; transform: rotate(45deg);
}
.pds-crumbs a {
  display: inline-flex; align-items: center; min-height: 24px; border-radius: 4px;
  --pds-link: var(--pds-purple-700); --pds-link-line: underline; /* a faint underline, so the link never relies on colour alone */
  text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(55, 0, 179, .3);
}
.pds-crumbs a:hover { text-decoration-color: currentColor; }

@media (max-width: 500px) {
  .pds-crumbs ol { font-size: .75rem; }
  .pds-crumbs { margin-bottom: 14px; }
}


/* =====================================================================
   6. COMPONENTS
   ===================================================================== */

/* ---------------------------------------------------------------------
   6.1 Icons (inline SVG sprite: <svg class="pds-i"><use href="#i-…"/>)
   --------------------------------------------------------------------- */
.pds-i {
  width: 1.25em; height: 1.25em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
/* Solid parts of an icon (class "pds-fill" on the sprite path). The path is cloned into each
   <use>'s shadow tree, where descendant selectors like ".pds-i--off .pds-fill" never match. Only
   inherited values cross that boundary, so per-instance changes go through custom properties set
   on the <svg>: --pds-fill (default: the text colour) and --pds-fill-stroke (default: none). */
.pds-fill { fill: var(--pds-fill, currentColor); stroke: var(--pds-fill-stroke, none); }
.pds-i--chev { width: 1em; height: 1em; transition: transform .2s ease; }
.pds-i--ext { width: .9em; height: .9em; opacity: .7; }

/* Round icon tile: the surface's tint (purple 50 on white, white on purple 50; --pds-tint, section 1) */
.pds-icon-tile { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: var(--pds-r-sm); background: var(--pds-tint); color: var(--pds-action); }
.pds-icon-tile .pds-i { width: 24px; height: 24px; }
.pds-icon-tile--teal { background: var(--pds-accent); color: #fff; } /* teal 700 + white icon */
/* --sm: the 40px tile (feature and set-up bullets, the 404's link cards). On phones every icon tile is this size. */
.pds-icon-tile--sm { width: 40px; height: 40px; border-radius: var(--pds-r-chip); }
.pds-icon-tile--sm .pds-i { width: 20px; height: 20px; }
@media (max-width: 500px) {
  .pds-icon-tile { width: 40px; height: 40px; border-radius: var(--pds-r-chip); }
  .pds-icon-tile .pds-i { width: 20px; height: 20px; }
}

/* Check list (teal 700 check discs, white tick) */
.pds-checks { display: grid; gap: 12px; }
.pds-checks li { display: flex; align-items: flex-start; gap: 12px; color: var(--pds-deep); line-height: 1.5; }
.pds-checks .pds-i { width: 22px; height: 22px; padding: 3px; margin-top: 1px; border-radius: 50%; background: var(--pds-accent); color: #fff; stroke-width: 3; }
.pds-checks--inline { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.pds-checks--inline li { align-items: center; }


/* ---------------------------------------------------------------------
   6.2 Buttons, text links, CTA rows, reassurance microcopy
   --------------------------------------------------------------------- */
.pds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border-radius: var(--pds-r-pill);
  font: 700 1rem/1 var(--pds-font); white-space: nowrap;
  border: 1.5px solid transparent; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.pds-btn--sm { min-height: 44px; padding: 0 20px; font-size: var(--pds-fs-meta); }
.pds-btn--lg { min-height: 56px; padding: 0 30px; font-size: var(--pds-fs-body-lg); }
.pds-btn--block { display: flex; width: 100%; }
/* Text colour comes from --pds-link (section 2, "Links"), on <a> and <button> alike */
.pds-btn--primary { background: var(--pds-action); --pds-link: #fff; box-shadow: 0 8px 20px -8px rgba(55, 0, 179, .55); } /* purple 700 */
.pds-btn--primary:hover { background: var(--pds-action-hover); transform: translateY(-1px); } /* purple 800 */
.pds-btn--ghost { background: #fff; --pds-link: var(--pds-deep); border-color: var(--pds-line); }
.pds-btn--ghost:hover { border-color: var(--pds-deep); background: var(--pds-mist); }
/* Teal button: the secondary colour, for THE call to action ON PURPLE 900 (dark sections, the mobile menu).
   Teal 200 fill + purple 900 label (Katie's rule: 200–50 backgrounds take dark text): 9.2:1 for the label AND
   9.2:1 for the button against purple 900, so it is the brightest thing in a dark section and clearly leads.
   (Round 3's teal 800 + white was only 2.9:1 against purple 900 and read as a dim blob; DECISIONS #13.)
   Hover: teal 100, lighter still. Use the primary purple 700 button on light backgrounds, never this one. */
.pds-btn--teal { background: var(--pds-teal-200); --pds-link: var(--pds-deep); box-shadow: 0 10px 28px -10px rgba(3, 218, 198, .55); }
.pds-btn--teal:hover { background: var(--pds-teal-100); transform: translateY(-1px); }
.pds-btn:disabled { cursor: progress; opacity: .7; transform: none; } /* a checkout button while its request is pending */
.pds-btn .pds-i--chev { margin-right: -4px; }
.pds-btn[aria-expanded="true"] .pds-i--chev { transform: rotate(180deg); }

.pds-textlink {
  display: inline-flex; align-items: center; gap: 8px; min-height: 24px;
  font-weight: 700; --pds-link: var(--pds-action); --pds-link-line: underline;
  text-decoration-thickness: 1.5px; text-underline-offset: 5px; text-decoration-color: rgba(55, 0, 179, .35);
}
.pds-textlink:hover { text-decoration-color: currentColor; }
.pds-textlink .pds-i { transition: transform .18s ease; }
.pds-textlink:hover .pds-i { transform: translateX(3px); }
.pds-textlink--wrap { display: inline; line-height: 1.5; } /* long labels: wraps like text, arrow stays on the last line */
.pds-textlink--wrap .pds-i { display: inline-block; margin-left: 6px; vertical-align: -.2em; }
.pds-textlink--on-dark { --pds-link: #fff; text-decoration-color: rgba(3, 218, 198, .7); }
.pds-textlink--on-dark .pds-i { color: var(--pds-accent-on-dark); }
.pds-textlink--on-dark:hover { text-decoration-color: var(--pds-accent-on-dark); }

/* A link inside running text (FAQ answers, legal text, a partner's name, a card's line, a form note): underlined
   purple 700, so it never relies on colour alone. The one style for links in sentences (.pds-textlink is the
   stand-alone link with an arrow): add .pds-link, or sit inside one of the containers listed here. */
.pds-link, .pds-acc__panel a, .pds-legal__body a, .pds-partner__by a {
  --pds-link: var(--pds-action); --pds-link-line: underline; font-weight: 500;
  text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--pds-underline);
}
.pds-link:hover, .pds-acc__panel a:hover, .pds-legal__body a:hover, .pds-partner__by a:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; }

.pds-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }

/* Reassurance microcopy directly under a primary CTA (reference P2 #11) */
.pds-micro { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 16px; }
.pds-micro li { display: inline-flex; align-items: center; gap: 7px; font-size: var(--pds-fs-meta); font-weight: 500; line-height: 1.4; color: var(--pds-deep); }
.pds-micro .pds-i { width: 18px; height: 18px; padding: 2px; border-radius: 50%; background: var(--pds-teal-50); color: var(--pds-teal-900); stroke-width: 3; }


/* ---------------------------------------------------------------------
   6.3 Placeholder system: ONE style site-wide
   - .pds-tag: a dashed tag that reads "PLACEHOLDER — …" (missing photo,
     stat, testimonial, logo, icon set) or "MOCK — …" (HTML product mock
     standing in for a real screenshot). Tags sit in empty space or
     beneath the thing they describe, never on top of real content.
   - .pds-ph: a dashed box that stands in for missing content, sized like
     the real thing, with a .pds-tag inside it.
   --------------------------------------------------------------------- */
.pds-tag {
  display: inline-flex; align-items: center; max-width: 100%;
  padding: 4px 10px; border: 1.5px dashed var(--pds-ph-line); border-radius: 8px;
  background: rgba(255, 255, 255, .94); color: var(--pds-deep);
  font: 700 .6875rem/1.35 var(--pds-font); letter-spacing: .02em; text-align: left;
}
.pds-tag--on-dark { background: rgba(35, 3, 106, .6); border-color: rgba(219, 178, 255, .7); color: #fff; }
.pds-tag--pin { position: absolute; z-index: 4; top: 14px; left: 14px; max-width: calc(100% - 28px); } /* only over empty padding or a stand-in image */
.pds-tag--pin-right { left: auto; right: 14px; }
.pds-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.pds-ph {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  border: 2px dashed var(--pds-ph-line); border-radius: var(--pds-r-card);
  background: repeating-linear-gradient(135deg, rgba(242, 231, 254, .9) 0 12px, rgba(255, 255, 255, .7) 12px 24px); /* purple 50 stripes */
  color: var(--pds-muted); text-align: center;
}
.pds-ph--on-dark { border-color: rgba(219, 178, 255, .6); background: rgba(255, 255, 255, .04); color: var(--pds-on-dark); }
.pds-ph__label { font-size: var(--pds-fs-caption); font-weight: 500; line-height: 1.4; }

/* Stat placeholder: same size as a real stat, dashed (for R&S and later pages) */
.pds-ph-stat { padding: 20px 24px; border: 2px dashed var(--pds-ph-line); border-radius: var(--pds-r-card); }
.pds-ph-stat .pds-stat__num { color: var(--pds-purple-500); } /* text: purple 500, never 400 */

/* Logo placeholder */
.pds-ph-logo { width: 150px; height: 64px; padding: 6px 10px; border-radius: var(--pds-r-sm); gap: 4px; }
.pds-ph-logo .pds-tag { border: 0; padding: 0; background: none; font-size: .625rem; }

@media (max-width: 500px) {
  .pds-tag { font-size: .625rem; padding: 3px 8px; }
}


/* ---------------------------------------------------------------------
   6.4 Header, nav, dropdowns, mega menu
   One site-wide header. Only the primary button changes by page:
   "Book a demo" on organization pages, "Start my membership" elsewhere.
   The logo is an <img> of a pre-coloured image: logo-deep.webp on light
   backgrounds, logo-white.webp on dark ones (2x WebPs of the 800×129 PNG
   masters beside them; keep the ratio).
   Without JS: dropdowns open on hover and keyboard focus (CSS only);
   the mobile "Menu" button stays hidden (the footer carries every
   link). pds.js adds .pds-is-enhanced to the header, then the panels
   open on click and close on Esc / outside click.
   --------------------------------------------------------------------- */
.pds-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid rgba(35, 3, 106, .08);
}
.pds-header__bar { position: relative; display: flex; align-items: center; gap: 28px; height: var(--pds-header-h); }
.pds-logo { display: inline-flex; align-items: center; flex: none; min-height: 32px; border-radius: 6px; }
.pds-header .pds-logo, .pds-mobile .pds-logo { min-height: 44px; }
.pds-logo__img { display: block; width: 150px; height: auto; } /* logo-deep.webp or logo-white.webp */
.pds-logo__img--lg { width: 176px; }

.pds-nav { flex: 1; }
.pds-nav__list { display: flex; align-items: center; gap: 2px; }
.pds-nav__item {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
  border: 0; border-radius: var(--pds-r-pill); background: none; cursor: pointer;
  font: 500 .96875rem/1 var(--pds-font); --pds-link: var(--pds-deep); white-space: nowrap;
  transition: background-color .15s ease;
}
.pds-nav__item:hover, .pds-nav__item[aria-expanded="true"] { background: var(--pds-mist); }
.pds-nav__item[aria-expanded="true"] .pds-i--chev { transform: rotate(180deg); }
.pds-nav__item[aria-current="page"] { background: var(--pds-lav); }
.pds-nav__item--login { font-weight: 700; }
.pds-header__actions { display: flex; align-items: center; gap: 8px; }

.pds-dd { position: relative; }
.pds-dd--mega { position: static; }
.pds-dd__panel {
  display: none; position: absolute; top: calc(100% + 10px); left: 0; z-index: 60;
  background: #fff; border: 1px solid var(--pds-line); border-radius: var(--pds-r-card);
  box-shadow: var(--pds-shadow-lg); padding: 8px;
}
/* No JS yet: open on hover or keyboard focus. With pds.js: open only when not [hidden] */
.pds-header:not(.pds-is-enhanced) .pds-dd:is(:hover, :focus-within) > .pds-dd__panel,
.pds-header.pds-is-enhanced .pds-dd__panel:not([hidden]) { display: block; }
.pds-dd__panel--sm { min-width: 320px; }
.pds-dd__panel--right { left: auto; right: 0; }
.pds-dd__panel--mega { top: calc(100% - 4px); left: 50%; transform: translateX(-50%); width: min(1120px, calc(100vw - 48px)); padding: 12px; }
.pds-dd__link {
  display: flex; align-items: flex-start; gap: 14px; padding: 12px; border-radius: var(--pds-r-sm);
  transition: background-color .15s ease;
}
.pds-dd__link:hover { background: var(--pds-mist); }
.pds-dd__link[aria-current="page"] { background: var(--pds-lav); }
.pds-dd__icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--pds-r-chip); background: var(--pds-lav); color: var(--pds-action); }
.pds-dd__icon--teal { background: var(--pds-teal-50); color: var(--pds-teal-900); }
.pds-dd__title { display: block; font-size: .96875rem; font-weight: 700; color: var(--pds-deep); line-height: 1.3; }
.pds-dd__desc { display: block; margin-top: 2px; font-size: .84375rem; color: var(--pds-muted); line-height: 1.4; text-wrap: pretty; } /* no one-word last line */

/* For Organizations mega menu: two labelled parts.
   "Who we serve" = the nine organization types (3 × 3, icon + name + one line).
   "Ways to partner" = a tinted column with the highlighted Powered by Petcademy
   card (its description always shows with the name) and Integrations.
   Two columns from 1181px; at 1024–1180 "Ways to partner" moves under the
   grid as a strip, so every name stays on one line.
   <div class="pds-mega">
     <div class="pds-mega__serve"><p class="pds-mega__label" id="…">Who we serve</p><ul class="pds-mega__grid" aria-labelledby="…">…</ul></div>
     <div class="pds-mega__ways"><p class="pds-mega__label" id="…">Ways to partner</p><ul class="pds-mega__ways-list" aria-labelledby="…">
       <li><a class="pds-mega__feature">…</a></li><li><a class="pds-dd__link">Integrations…</a></li></ul></div>
   </div> */
.pds-mega { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1.3fr); gap: 12px; }
.pds-mega__label { padding: 8px 12px 6px; font-size: var(--pds-fs-caption); font-weight: 700; line-height: 1.4; letter-spacing: .01em; color: var(--pds-muted); }
.pds-mega__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.pds-mega__ways { display: flex; flex-direction: column; padding: 0 8px 8px; border-radius: var(--pds-r-md); background: var(--pds-mist); }
.pds-mega__ways-list { display: grid; gap: 4px; }
.pds-mega__ways .pds-dd__link:hover { background: #fff; }
.pds-mega__foot { display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding: 12px 12px 4px; margin-top: 6px; border-top: 1px solid var(--pds-grey-100); }

.pds-menu-btn {
  display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border: 1.5px solid var(--pds-line); border-radius: var(--pds-r-pill); background: #fff; cursor: pointer;
  font-weight: 700; font-size: var(--pds-fs-meta); color: var(--pds-deep);
}

@media (max-width: 1240px) {
  .pds-header__bar { gap: 16px; }
  .pds-header .pds-logo__img { width: 128px; }
  .pds-nav__item { padding: 0 10px; font-size: var(--pds-fs-meta); }
}
@media (max-width: 1180px) { /* small laptops: "Who we serve" gets the full width (names stay on one line); "Ways to partner" becomes a strip under it */
  .pds-mega { grid-template-columns: minmax(0, 1fr); }
  .pds-mega__ways-list { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; gap: 8px; }
}
@media (max-width: 1023px) {
  :root { --pds-header-h: 68px; }
  .pds-nav, .pds-header__actions > .pds-dd, .pds-header__cta { display: none; }
  .pds-header__bar { justify-content: space-between; }
  .pds-header__actions { margin-left: auto; }
  .pds-header.pds-is-enhanced .pds-menu-btn { display: inline-flex; } /* only once pds.js can open the menu */
}


/* ---------------------------------------------------------------------
   6.5 Mobile menu (below 1024px): full-screen dialog, focus trapped
   --------------------------------------------------------------------- */
.pds-mobile {
  position: fixed; inset: 0; z-index: 100; overflow-y: auto; overscroll-behavior: contain;
  background: var(--pds-deep); color: #fff; padding: 0 16px 40px;
}
.pds-mobile__bar { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.pds-menu-btn--close { display: inline-flex; background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.pds-mobile :focus-visible { outline-color: var(--pds-focus-on-dark); }
.pds-mobile__body { padding-top: 8px; }
.pds-mobile__list { margin-top: 20px; border-top: 1px solid var(--pds-line-dark); }
.pds-mobile__list > li { border-bottom: 1px solid var(--pds-line-dark); }
.pds-mobile__acc, .pds-mobile__link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 56px;
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  font-size: 1.125rem; font-weight: 700; --pds-link: #fff;
}
.pds-mobile__link { justify-content: flex-start; }
.pds-mobile__acc[aria-expanded="true"] .pds-i--chev { transform: rotate(180deg); }
.pds-mobile__sub { padding: 0 0 12px 4px; }
.pds-mobile__sub a { display: flex; align-items: center; gap: 6px; min-height: 44px; --pds-link: var(--pds-on-dark); font-size: 1rem; }
.pds-mobile__sub a[aria-current="page"] { --pds-link: #fff; font-weight: 700; }
/* For Organizations: two labelled groups, mirroring the desktop mega menu */
.pds-mobile__group + .pds-mobile__group { margin-top: 14px; }
.pds-mobile__grouplabel { padding: 4px 0 2px; font-size: var(--pds-fs-caption); font-weight: 700; letter-spacing: .01em; color: var(--pds-on-dark-label); }
.pds-mobile__sub .pds-mobile__feature { /* Powered by Petcademy: the name always shows with its description */
  display: grid; gap: 4px; margin: 6px 0 4px; padding: 14px 16px; border-radius: var(--pds-r-sm);
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(3, 218, 198, .55); --pds-link: #fff;
}
.pds-mobile__feature strong { display: inline-flex; align-items: center; gap: 8px; font-size: 1rem; }
.pds-mobile__feature strong .pds-i { color: var(--pds-accent-on-dark); }
.pds-mobile__feature span { font-size: var(--pds-fs-meta); line-height: 1.45; color: var(--pds-on-dark); }
/* "Book a demo" closes the For Organizations group, outside both labelled lists (like the mega menu's footer row) */
.pds-mobile__subfoot { margin-top: 10px; padding-top: 4px; border-top: 1px solid var(--pds-line-dark); }
.pds-mobile__login { margin-top: 28px; display: grid; gap: 10px; }
.pds-mobile__label { font-size: var(--pds-fs-small); font-weight: 700; color: var(--pds-on-dark-label); }
.pds-mobile__loginlink {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px;
  border: 1px solid var(--pds-line-dark); border-radius: var(--pds-r-sm); --pds-link: #fff; font-weight: 500;
}


/* ---------------------------------------------------------------------
   6.6 Audience signposts
   - .pds-rail: linked deep-purple "For organizations →" lead tile + the 9
     organization types as icon tiles. Desktop + tablet (hidden on phones).
     Layouts (always tidy, never a lone orphan tile):
       ≥1241      one row: lead + 9 tiles (lead narrows at 1340)
       861–1240   lead on the left, tiles as an even 3 × 3 grid
       501–860    lead on top, tiles 3 × 3
   - .pds-orgchips: the same 9 as wrap chips. Phones only (≤500).
   --------------------------------------------------------------------- */
.pds-rail {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 8px; padding: 8px;
  background: #fff; border: 1px solid var(--pds-line); border-radius: 26px; box-shadow: var(--pds-shadow-rail);
}
.pds-rail__lead {
  display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 14px 18px;
  border-radius: 19px; background: var(--pds-deep); --pds-link: #fff;
  transition: background-color .18s ease;
}
.pds-rail__lead:hover { background: var(--pds-action); }
.pds-rail__lead:focus-visible { outline-color: var(--pds-focus); }
.pds-rail__stack { display: flex; }
.pds-rail__stack span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 0 2.5px var(--pds-deep); }
.pds-rail__stack span + span { margin-left: -7px; }
.pds-rail__stack .pds-i { width: 16px; height: 16px; stroke-width: 2; }
.pds-rail__stack span:nth-child(1) { background: var(--pds-lav); color: var(--pds-action); }
.pds-rail__stack span:nth-child(2) { background: var(--pds-accent-on-dark); color: var(--pds-deep); }
.pds-rail__stack span:nth-child(3) { background: var(--pds-purple-100); color: var(--pds-deep); }
.pds-rail__lead-text { display: inline-flex; align-items: center; gap: 8px; font-size: var(--pds-fs-body-lg); font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.pds-rail__lead-text .pds-i { color: var(--pds-accent-on-dark); transition: transform .18s ease; }
.pds-rail__lead:hover .pds-rail__lead-text .pds-i { transform: translateX(4px); }

.pds-rail__list { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); }
.pds-rail__list li { position: relative; }
.pds-rail__list li + li::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: var(--pds-grey-100); }
.pds-rail__item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; height: 100%;
  min-height: 84px; padding: 13px 12px 12px; border-radius: var(--pds-r-md);
  font-size: var(--pds-fs-small); font-weight: 500; line-height: 1.25; --pds-link: var(--pds-deep);
  transition: background-color .15s ease;
}
.pds-rail__item .pds-i { width: 22px; height: 22px; color: var(--pds-action); transition: transform .18s ease; }
.pds-rail__item:hover { background: var(--pds-mist); }
.pds-rail__item:hover .pds-i { transform: translateY(-2px); }
.pds-rail__item[aria-current="page"] { background: var(--pds-lav); }
.pds-rail__item:focus-visible { outline-offset: -3px; }

@media (max-width: 1340px) { /* one row still, a narrower lead tile so each name keeps a clean two-line wrap */
  .pds-rail { grid-template-columns: 180px minmax(0, 1fr); }
  .pds-rail__lead { padding: 14px; }
  .pds-rail__lead-text { font-size: var(--pds-fs-meta); }
  .pds-rail__item { padding: 12px 9px; font-size: var(--pds-fs-caption); }
}
@media (max-width: 1240px) { /* lead on the left, the nine as an even 3 × 3 */
  .pds-rail { grid-template-columns: 200px minmax(0, 1fr); }
  .pds-rail__lead { padding: 16px 20px; }
  .pds-rail__lead-text { font-size: var(--pds-fs-body-lg); }
  .pds-rail__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 0; }
  .pds-rail__list li:nth-child(3n + 1)::before { display: none; }
  .pds-rail__list li::before { top: 12px; bottom: 12px; }
  .pds-rail__item { flex-direction: row; align-items: center; min-height: 48px; gap: 10px; padding: 8px 14px; font-size: var(--pds-fs-small); }
  .pds-rail__item .pds-i { width: 20px; height: 20px; }
}
@media (max-width: 860px) {
  .pds-rail { grid-template-columns: 1fr; }
  .pds-rail__lead { flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; padding: 12px 16px; }
}
@media (max-width: 640px) { /* still 3 × 3; long names wrap to two lines beside the icon */
  .pds-rail__item { gap: 8px; padding: 8px 10px; font-size: var(--pds-fs-caption); }
  .pds-rail__item .pds-i { width: 18px; height: 18px; }
}

.pds-orgchips { display: none; }
.pds-orgchips__list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pds-orgchips__list a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 13px;
  border: 1px solid var(--pds-line); border-radius: var(--pds-r-pill); background: #fff;
  font-size: .84375rem; font-weight: 500; line-height: 1.2; --pds-link: var(--pds-deep);
}
.pds-orgchips__list a:hover { background: var(--pds-lav); }
@media (max-width: 500px) {
  .pds-orgchips { display: block; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--pds-line); }
}


/* ---------------------------------------------------------------------
   6.7 Product mocks (labelled "MOCK — …" wherever they appear)
   Phone (text thread), chat bubbles, trainer thread, hub visuals (lesson
   videos, photo album: no label), floating chips. (The HTML dashboard and
   the enrichment checklist went when the drawn pictures replaced them.)
   --------------------------------------------------------------------- */
/* Phone. Everything is in em, so set font-size to scale the whole device */
.pds-phone {
  position: relative; font-size: 11.5px; width: 21.5em; height: 39em;
  padding: .7em; border-radius: 3.4em; background: var(--pds-night);
  box-shadow: var(--pds-shadow-device), inset 0 0 0 1.5px rgba(255, 255, 255, .12);
}
/* Site rule (Katie, 2026-10-29): phones show no status bar (no time, signal, battery or notch); people can tell it's a
   phone. The screen's top padding stands in for it. If one ever comes back, its battery shows almost full. */
.pds-phone__screen { height: 100%; padding-top: .6em; border-radius: 2.8em; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.pds-phone__head { display: flex; flex-direction: column; align-items: center; gap: .3em; padding: .35em 1em .65em; border-bottom: 1px solid var(--pds-grey-100); text-align: center; }
.pds-phone__head img { width: 3em; height: 3em; border-radius: 50%; }
.pds-phone__head strong { display: block; font-size: 1em; color: var(--pds-night); line-height: 1.2; }
.pds-phone__head small { display: block; font-size: .8em; color: var(--pds-muted); }
.pds-phone__composer {
  display: flex; align-items: center; gap: .6em; margin: 0 .9em 1.1em; padding: .35em .35em .35em 1.1em;
  border: 1px solid var(--pds-line); border-radius: 2em; font-size: .9em; color: var(--pds-muted-2);
}
.pds-phone__composer span { flex: 1; }
.pds-phone__composer b { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--pds-action); color: #fff; }
.pds-phone__composer .pds-i { width: 1.2em; height: 1.2em; stroke-width: 2.4; transform: rotate(-90deg); }

/* Chat thread + bubbles */
.pds-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: .5em; padding: .7em 1em .8em; background: #fff; overflow: hidden; } /* anchored to the newest message */
.pds-chat__day { align-self: center; font-size: .78em; color: var(--pds-muted); font-weight: 500; margin-bottom: .2em; }
.pds-msg { max-width: 82%; padding: .65em .95em; border-radius: 1.3em; font-size: 1em; line-height: 1.38; }
.pds-msg--in { align-self: flex-start; background: var(--pds-lav); color: var(--pds-deep); border-bottom-left-radius: .4em; }
.pds-msg--out { align-self: flex-end; background: var(--pds-action); color: #fff; border-bottom-right-radius: .4em; }
.pds-msg--photo { padding: .25em; width: 66%; }
.pds-msg--photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 1.1em; border-bottom-right-radius: .3em; }
.pds-msg__tag { display: flex; align-items: center; gap: .4em; margin-bottom: .3em; font-size: .78em; font-weight: 700; color: var(--pds-action); }
.pds-msg__tag .pds-i { width: 1.2em; height: 1.2em; }

/* Floating status chip (frosted) */
.pds-float {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px 12px 12px; border-radius: var(--pds-r-md);
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--pds-shadow-md); border: 1px solid rgba(255, 255, 255, .8);
  line-height: 1.25;
}
.pds-float strong { display: block; font-size: var(--pds-fs-small); color: var(--pds-deep); }
.pds-float small { display: block; font-size: .78rem; color: var(--pds-muted); white-space: nowrap; }
.pds-float__icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--pds-lav); color: var(--pds-action); }
.pds-float__icon--teal { background: var(--pds-accent); color: #fff; }
.pds-float__icon .pds-i { width: 20px; height: 20px; stroke-width: 2.2; }

/* Shared mock primitives */
.pds-online { width: 7px; height: 7px; border-radius: 50%; background: var(--pds-accent); }

/* Sheet: a white UI panel that rises from the bottom of a mock area */
.pds-sheet { flex: none; background: #fff; border-radius: 20px 20px 0 0; box-shadow: var(--pds-shadow-lg); border: 1px solid rgba(35, 3, 106, .06); border-bottom: 0; font-size: 14px; }

/* Trainer thread (email/text) */
.pds-thread { width: min(100%, 560px); }
.pds-thread__head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--pds-grey-100); }
.pds-thread__head img { width: 36px; height: 36px; border-radius: 50%; }
.pds-thread__head strong { display: block; font-size: .95em; color: var(--pds-deep); line-height: 1.25; }
.pds-thread__head small { display: flex; align-items: center; gap: 6px; font-size: .8em; color: var(--pds-muted); }
.pds-thread__channels { margin-left: auto; display: flex; gap: 4px; padding: 3px; border-radius: var(--pds-r-pill); background: var(--pds-mist); }
.pds-thread__channels b { padding: 4px 10px; border-radius: var(--pds-r-pill); font-size: .75em; font-weight: 700; color: var(--pds-muted); }
.pds-thread__channels b:first-child { background: #fff; color: var(--pds-deep); box-shadow: var(--pds-shadow-sm); }
.pds-thread__body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 6px; }
.pds-thread .pds-msg { font-size: .95em; max-width: 78%; }
.pds-thread__foot { display: flex; align-items: center; gap: 6px; padding: 8px 18px 16px; font-size: .78em; font-weight: 500; color: var(--pds-teal-800); }
.pds-thread__foot .pds-i { width: 15px; height: 15px; stroke-width: 2.4; }

/* Hub visuals: simplified pictures of the Pet Parent Hub (research/brief.md), not screenshots, so they show
   only the point of the card and no numbers that could date or confuse. Real hub content: lesson art
   (scripts/hub_assets.py), lesson titles, album and prompt names. No MOCK tag; pair the mock area with
   .pds-feature__visual--untagged (6.8). */

/* Lesson wall: lesson thumbnails with their titles, and a play button (.pds-vid__play) only on lessons that have
   a video (not every lesson does: leave it out for the others). Positioned, so it never
   sets its area's height: it starts under the area's top padding and runs off the bottom edge. Three columns,
   the middle one dropped a little; from 1180px down, where cards are narrower, two columns (the first six
   lessons), so no thumbnail gets too small for its play button. */
.pds-vidwall {
  position: absolute; inset: 32px 32px auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
  margin: 0; padding: 0; list-style: none;
}
.pds-vid { overflow: hidden; background: #fff; border: 1px solid rgba(35, 3, 106, .06); border-radius: var(--pds-r-chip); box-shadow: var(--pds-shadow-md); }
.pds-vid:nth-child(3n+2) { transform: translateY(28px); }
.pds-vid__thumb { position: relative; display: block; }
.pds-vid__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
.pds-vid__play {
  position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 34px; height: 34px; translate: -50% -50%;
  border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--pds-action); box-shadow: var(--pds-shadow-sm);
}
.pds-vid__play .pds-i { width: 16px; height: 16px; margin-left: 2px; }
.pds-vid b { display: block; padding: 9px 12px 11px; font-size: 13px; line-height: 1.3; color: var(--pds-deep); }
@media (max-width: 1180px) {
  .pds-vidwall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pds-vid:nth-child(3n+2) { transform: none; }
  .pds-vid:nth-child(2n) { transform: translateY(28px); }
  .pds-vid:nth-child(n+7) { display: none; }
}
@media (max-width: 1023px) {
  .pds-vidwall { inset: 32px 20px auto; gap: 10px; } /* level with its neighbours' top padding */
  .pds-vid:nth-child(2n) { transform: translateY(20px); }
  .pds-vid__play { width: 28px; height: 28px; }
  .pds-vid__play .pds-i { width: 13px; height: 13px; }
  .pds-vid b { padding: 7px 10px 9px; font-size: 12px; }
}
@media (max-width: 500px) {
  .pds-vidwall { inset: 20px 16px auto; }
}

/* Photo album: a hub album as a sheet. Its title, then one answered photo prompt shown large (the photo, the
   prompt's name and the caption) beside the next prompts, each waiting for a photo; below 1024px the prompts
   go under the photo. The sheet fills its mock area's height without setting it (the card beside it does),
   and the photo takes whatever room is left. */
.pds-album { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; width: min(100%, 560px); }
.pds-album__head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--pds-grey-100); }
.pds-album__icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--pds-lav); color: var(--pds-action); }
.pds-album__icon .pds-i { width: 20px; height: 20px; }
.pds-album__head strong { display: block; font-size: .95em; line-height: 1.25; color: var(--pds-deep); }
.pds-album__head small { display: block; font-size: .8em; color: var(--pds-muted); }
.pds-album__grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.55fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; padding: 16px 18px 18px; }
.pds-album__photo { grid-row: span 2; display: flex; flex-direction: column; min-height: 0; margin: 0; overflow: hidden; border: 1px solid var(--pds-line); border-radius: var(--pds-r-sm); background: #fff; }
.pds-album__photo img { display: block; flex: 1 1 0; min-height: 0; width: 100%; height: auto; object-fit: cover; object-position: 50% 40%; }
.pds-album__photo figcaption { padding: 10px 12px 12px; font-size: .85em; line-height: 1.35; color: var(--pds-muted); }
.pds-album__photo figcaption b { display: block; margin-bottom: 2px; font-size: 1.05em; color: var(--pds-deep); }
.pds-album__tag { display: flex; align-items: center; gap: .4em; margin-bottom: 4px; font-size: .9em; font-weight: 700; color: var(--pds-action); }
.pds-album__tag .pds-i, .pds-album__prompt .pds-i { width: 1.3em; height: 1.3em; }
.pds-album__prompt {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 12px;
  border: 1.5px dashed var(--pds-line); border-radius: var(--pds-r-sm); background: var(--pds-mist); text-align: center;
  font-size: .85em; color: var(--pds-muted);
}
.pds-album__prompt span { display: grid; place-items: center; width: 2.6em; height: 2.6em; margin-bottom: 4px; border-radius: 50%; background: #fff; color: var(--pds-action); box-shadow: var(--pds-shadow-sm); }
.pds-album__prompt b { font-size: 1.05em; color: var(--pds-deep); }
.pds-album__prompt small { font-size: 1em; }
@media (max-width: 1023px) {
  .pds-album__grid { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; padding: 12px 14px 14px; }
  .pds-album__photo { grid-row: auto; grid-column: span 2; }
  .pds-album__prompt { flex-direction: row; justify-content: flex-start; gap: 8px; padding: 8px 10px; text-align: left; } /* compact: the photo keeps the room */
  .pds-album__prompt span { width: 2.2em; height: 2.2em; margin: 0; flex: none; }
  .pds-album__prompt small { display: none; }
}





/* ---------------------------------------------------------------------
   6.8 Cards
   - .pds-bento: an even 2×2 grid of equal-width cards (stacks on phones)
   - .pds-feature: product card = mock area on top, copy below
   --------------------------------------------------------------------- */
.pds-bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pds-grid-gap); }
.pds-feature { /* not a link: no hover lift (only cards that are links move on hover) */
  --pds-tint: var(--pds-purple-50); /* white card */
  /* Each card spans two rows of the grid (subgrid): the mock areas in a row share one height and the
     copy starts on the same line, even when one mock needs more room than its neighbour. */
  display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; overflow: hidden;
  background: #fff; border: 1px solid var(--pds-line); border-radius: var(--pds-r-card);
}
.pds-feature__visual { /* tag on top (in flow, so a tall mock can never cover it), mock rising from the bottom.
                          min-height, not height: on narrow cards the tag wraps and the mock needs more room,
                          and a fixed height would slice through its last lines. */
  position: relative; min-height: 380px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 32px 0;
}
.pds-feature__visual > .pds-tag { align-self: flex-start; flex: none; }
.pds-feature__visual--lav { background: linear-gradient(160deg, var(--pds-purple-50) 0%, #fff 100%); }
.pds-feature__visual--mist { background: linear-gradient(160deg, #fff 0%, var(--pds-purple-50) 100%); }
.pds-feature__visual--teal { background: linear-gradient(160deg, var(--pds-teal-50) 0%, #fff 100%); }
.pds-feature__visual--untagged { justify-content: flex-end; padding-top: 32px; } /* no tag above the visual (a hub visual, 6.7, or an unlabelled mock) */
.pds-feature__visual > .pds-thread, .pds-feature__visual > .pds-album { font-size: 15px; } /* larger type, so a sheet fills its area */
/* An untagged thread starts at the area's top padding like its neighbours, however short it is: the sheet
   stretches and keeps its messages at the bottom, as a chat does */
.pds-feature__visual--untagged > .pds-thread { flex: 1 0 auto; display: flex; flex-direction: column; }
.pds-feature__visual--untagged > .pds-thread .pds-thread__body { flex: 1; justify-content: flex-end; }
.pds-feature__body { padding: 28px 32px 34px; border-top: 1px solid var(--pds-line); }
.pds-feature__body p { margin-top: 10px; max-width: 54ch; }

@media (max-width: 1023px) {
  .pds-feature__visual { padding-inline: 20px; }
  .pds-feature__body { padding: 24px 24px 28px; }
  .pds-feature__visual > .pds-thread, .pds-feature__visual > .pds-album { font-size: 13px; }
  .pds-thread__channels { display: none; }
}
@media (max-width: 640px) { .pds-bento { grid-template-columns: 1fr; } }
@media (max-width: 500px) {
  .pds-feature__visual { min-height: 260px; padding: 12px 16px 0; }
  .pds-feature__visual--untagged { padding-top: 20px; }
  .pds-feature__visual--untagged:has(> .pds-album, > .pds-vidwall) { min-height: 400px; } /* room for the album's photo and the lesson wall; a thread keeps its own height */
  .pds-feature__body { padding: 22px 20px 26px; }
}



/* ---------------------------------------------------------------------
   6.9 Stats
   - .pds-panel-dark: inset deep-purple data panel
   - .pds-stats / .pds-stat: stat row with a micro-visual above each number
   - .pds-ph-stat (6.3): dashed "stat needed" version of a stat
   (The organization pages' big numbers are 8.3, .pds-bignums.)
   --------------------------------------------------------------------- */
.pds-panel-dark {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(40px, 5.5vw, 80px);
  border-radius: var(--pds-r-panel); color: #fff;
  background:
    radial-gradient(700px 420px at 92% -10%, rgba(55, 0, 179, .95), transparent 65%),
    radial-gradient(520px 360px at -5% 110%, rgba(86, 0, 232, .32), transparent 62%), /* purple 600 glow (a teal glow here mixed into off-palette navy) */
    var(--pds-deep);
}
.pds-panel-dark::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.2px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%);
}
.pds-panel-dark :focus-visible { outline-color: var(--pds-focus-on-dark); }

.pds-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pds-stat { padding: 8px clamp(16px, 2vw, 32px); border-left: 1px solid var(--pds-line-dark); }
.pds-stat:first-child { padding-left: 0; border-left: 0; }
.pds-stat__viz { height: 36px; display: flex; align-items: center; margin-bottom: 20px; }
.pds-stat__num { font-size: var(--pds-fs-stat); font-weight: 700; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: #fff; white-space: nowrap; }
.pds-stat__unit { font-size: .58em; letter-spacing: -.02em; }
.pds-stat__label { margin-top: 12px; font-size: var(--pds-fs-body-lg); color: var(--pds-on-dark); line-height: 1.4; }


/* Stat micro-visuals */
.pds-avatars img, .pds-avatars span { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid var(--pds-deep); margin-left: -10px; }
.pds-avatars img:first-child { margin-left: 0; }
.pds-avatars span { display: grid; place-items: center; background: var(--pds-accent-on-dark); color: var(--pds-deep); font-weight: 900; font-size: 1.1rem; }
.pds-stars-meter { position: relative; width: max-content; }
.pds-stars-meter span { display: flex; align-items: center; gap: 3px; height: 36px; }
.pds-stars-meter .pds-i { width: 26px; height: 26px; }
.pds-stars-meter__base { color: rgba(255, 255, 255, .18); }
.pds-stars-meter__fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; color: var(--pds-accent-on-dark); }
.pds-minichip { gap: 8px; width: max-content; height: 34px; padding: 0 14px 0 6px; border-radius: var(--pds-r-pill); background: rgba(255, 255, 255, .08); border: 1px solid var(--pds-line-dark); font-size: var(--pds-fs-caption); font-weight: 500; color: #fff; }
.pds-minichip__icon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--pds-accent-on-dark); color: var(--pds-deep); }
.pds-minichip__icon .pds-i { width: 14px; height: 14px; stroke-width: 2.6; }
.pds-countries { gap: 6px; }
.pds-countries span { display: grid; place-items: center; height: 30px; padding: 0 10px; border-radius: 8px; background: rgba(255, 255, 255, .08); border: 1px solid var(--pds-line-dark); font-size: var(--pds-fs-caption); font-weight: 700; letter-spacing: .06em; color: #fff; }

/* One-line trust statement under a stat row */
.pds-trust { /* full width, so a divider set on it spans the stat row above; the text keeps its measure */
  display: flex; align-items: flex-start; gap: 18px;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.3125rem); line-height: 1.5; color: #fff;
}
.pds-trust__text { max-width: 920px; }
.pds-trust__icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--pds-accent-on-dark); color: var(--pds-deep); margin-top: -4px; }
.pds-trust__icon .pds-i { width: 22px; height: 22px; stroke-width: 2.4; }

@media (max-width: 1180px) {
  .pds-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .pds-stat:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 500px) {
  .pds-panel-dark { padding: 36px 22px 32px; }
  .pds-stats { row-gap: 32px; }
  .pds-stat { padding: 0 0 0 16px; }
  .pds-stat:nth-child(odd) { padding-left: 0; border-left: 0; }
  .pds-stat__num { font-size: 2.125rem; letter-spacing: -.045em; }
  .pds-stat__label { font-size: var(--pds-fs-meta); }
  .pds-stat__viz { margin-bottom: 14px; height: 30px; }
  .pds-avatars img, .pds-avatars span { width: 30px; height: 30px; }
  .pds-avatars img:nth-child(n + 4) { display: none; }
  .pds-stars-meter .pds-i { width: 18px; height: 18px; }
  .pds-stars-meter span { height: 30px; gap: 2px; }
  .pds-minichip { font-size: .75rem; height: 30px; padding-right: 10px; }
  .pds-countries span { height: 28px; padding: 0 8px; font-size: .75rem; }
  .pds-trust { gap: 14px; }
  .pds-trust__icon { width: 32px; height: 32px; margin-top: 0; }
}


/* ---------------------------------------------------------------------
   6.10 Ratings + reviews
   Stars are teal 700 (4.4:1 on white, 3.7:1 on purple 50: WCAG 1.4.11)
   AND the rating is always written as text ("4/5"), so colour never
   carries it. An "off" star is the outline only. Fill and outline
   go through --pds-fill / --pds-fill-stroke (see 6.1): a descendant
   selector can't reach the star path inside <use>.

   The review cards themselves are the partner-quote grid (8.6) with
   .pds-reviews (Home, Membership, Pricing, the landing pages); this
   section holds the stars, the lettered avatar and the "Show more" row.
   --------------------------------------------------------------------- */
.pds-stars { display: inline-flex; align-items: center; gap: 10px; }
.pds-stars__row { display: inline-flex; gap: 2px; }
.pds-stars__row .pds-i { width: 18px; height: 18px; color: var(--pds-accent); stroke-width: 1.4; --pds-fill-stroke: var(--pds-accent); }
.pds-stars__row .pds-i--off { --pds-fill: transparent; }
.pds-stars__num { font-size: var(--pds-fs-small); font-weight: 700; color: var(--pds-deep); font-variant-numeric: tabular-nums; }

.pds-initial { width: 44px; height: 44px; flex: none; border-radius: 50%; object-fit: cover; }
.pds-initial { display: grid; place-items: center; background: var(--pds-lav); color: var(--pds-action); font-weight: 700; }

/* "Show more": pds.js collapses the list (3 visible, 2 on phones: 8.6) and
   reveals the button. Without JS every card simply shows. */
.pds-more { margin-top: 28px; text-align: center; }



/* ---------------------------------------------------------------------
   6.11 Logos row (grey, linked, with dashed placeholders): the Rescues &
   Shelters "Trusted by" card (8.1)
   --------------------------------------------------------------------- */
.pds-logos__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px clamp(28px, 4vw, 56px); margin-top: 28px; }
.pds-logos__row img { width: auto; object-fit: contain; filter: grayscale(1); transition: opacity .15s ease; }
.pds-logo-item a { display: block; border-radius: 10px; }
.pds-logo-item a:hover img { opacity: 1; }
.pds-logo-item--wide img { height: 56px; max-width: 160px; opacity: .8; }
.pds-logo-item--round img { height: 80px; max-width: 96px; }

@media (max-width: 500px) {
  .pds-logos__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; justify-items: center; }
  .pds-logo-item--wide img { height: 44px; max-width: 130px; }
  .pds-logo-item--round img { height: 68px; }
  .pds-ph-logo { width: 100%; height: 60px; }
  .pds-logos__row > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}


/* ---------------------------------------------------------------------
   6.12 (retired 2026-10-30: the photo partner quote. Quotes are 8.6;
   Home's closing quote is .pds-pullquote, pages/home.css 3.)
   --------------------------------------------------------------------- */


/* ---------------------------------------------------------------------
   6.13 Plans (pricing teaser cards with a 12-segment duration meter)
   Home: the cards are not links (Bailey, 2026-10-29); the "View pricing"
   button under them is. Pricing adds a feature list and a checkout
   button to the same card (.pds-plan--full, 6.22).
   --------------------------------------------------------------------- */
.pds-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: center; }
.pds-plan {
  position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name price" "term price" "meter meter";
  align-items: end;
  padding: 26px 26px 24px; border-radius: var(--pds-r-card);
  background: #fff; border: 1px solid var(--pds-line); box-shadow: var(--pds-shadow-sm);
  --pds-link: var(--pds-deep); color: var(--pds-link);
}
.pds-plan__name { grid-area: name; font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.pds-plan__term { grid-area: term; margin-top: 2px; font-size: var(--pds-fs-meta); color: var(--pds-muted); }
.pds-plan__price { grid-area: price; align-self: center; font-size: clamp(2.5rem, 2rem + 1.4vw, 3.25rem); font-weight: 700; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.pds-meter { grid-area: meter; display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; margin-top: 22px; }
.pds-meter i { height: 8px; border-radius: 3px; background: var(--pds-lav); }
.pds-meter--1 i:nth-child(-n + 1), .pds-meter--3 i:nth-child(-n + 3) { background: var(--pds-action); }
.pds-plan__badge {
  position: absolute; top: -13px; left: 26px; padding: 5px 12px; border-radius: var(--pds-r-pill);
  background: var(--pds-accent-on-dark); color: var(--pds-deep); font-size: var(--pds-fs-caption); font-weight: 700; line-height: 1.2; /* teal 200 + purple 900 (9.2:1) */
  box-shadow: 0 4px 12px -4px rgba(35, 3, 106, .35);
}
.pds-plan--featured {
  background: radial-gradient(320px 220px at 100% 0%, rgba(55, 0, 179, .9), transparent 70%), var(--pds-deep);
  border-color: var(--pds-deep); --pds-link: #fff; box-shadow: var(--pds-shadow-lg);
}
.pds-plan--featured .pds-plan__term { color: var(--pds-on-dark); }
.pds-plan--featured .pds-meter i { background: rgba(255, 255, 255, .16); }
.pds-plan--featured .pds-meter--12 i { background: var(--pds-accent-on-dark); }

@media (max-width: 1023px) {
  .pds-plans { grid-template-columns: 1fr; gap: 20px; }
}


/* ---------------------------------------------------------------------
   6.14 Accordion + tabs (for FAQs, "Why Petcademy", feature tabs)
   - .pds-acc: FAQ accordion. Each question is an <h3 class="pds-acc__h"> holding
     a <button class="pds-acc__q" aria-expanded aria-controls data-acc>, then
     its <div class="pds-acc__panel">, so the questions are real headings in
     every browser and screen reader (a heading inside <summary> isn't, in
     Safari/VoiceOver). The answers ship open; pds.js 3 closes them, so
     without JS every answer is readable.
   - .pds-tabs: pds.js turns stacked panels into tabs (role=tablist,
     arrow keys). Without JS the panels stay stacked and readable.
   - .pds-more: wrapper for the "Show more" toggle (see 6.10).
   --------------------------------------------------------------------- */
.pds-acc { border-top: 1px solid var(--pds-line); }
.pds-acc__item { border-bottom: 1px solid var(--pds-line); }
.pds-acc__h { font: inherit; } /* the heading only wraps the button, which carries the look */
.pds-acc__q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 64px; margin: 0; padding: 16px 4px;
  border: 0; background: none; text-align: left; cursor: pointer;
  font-size: 1.125rem; font-weight: 700; line-height: 1.35; color: var(--pds-deep);
}
.pds-acc__q::after {
  content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--pds-tint) center / 14px no-repeat; /* white on purple 50 sections (--pds-tint) */
  background-image: linear-gradient(var(--pds-action), var(--pds-action)), linear-gradient(var(--pds-action), var(--pds-action));
  background-size: 12px 2px, 2px 12px; transition: transform .2s ease;
}
.pds-acc__q[aria-expanded="true"]::after { background-size: 12px 2px, 0 0; background-color: var(--pds-teal-50); }
.pds-acc__q:hover { color: var(--pds-action); } /* focus ring: the site-wide --pds-focus (9.7:1 on mist) */
.pds-acc__panel { padding: 0 4px 24px; max-width: 70ch; }
.pds-acc__panel[hidden] { padding: 0; } /* until-found keeps the box, so drop its padding while closed */
.pds-acc__panel > * + * { margin-top: 12px; }
/* Links inside answers: the link-in-text style (6.2) */

.pds-tabs__list { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: var(--pds-r-pill); background: var(--pds-mist); width: max-content; max-width: 100%; }
.pds-tabs__tab {
  min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--pds-r-pill); background: transparent; cursor: pointer;
  font-size: var(--pds-fs-meta); font-weight: 700; color: var(--pds-muted);
}
.pds-tabs__tab:hover { color: var(--pds-deep); }
/* Selected = white fill + a 2px action-purple ring (9.7:1 against the mist bar, WCAG 1.4.11),
   not colour shifts alone. The focus ring sits 3px outside it, so the two never merge. */
.pds-tabs__tab[aria-selected="true"] { background: #fff; color: var(--pds-deep); box-shadow: inset 0 0 0 2px var(--pds-action), var(--pds-shadow-sm); }
.pds-tabs__panel { padding-top: 32px; }
.pds-tabs__panel:focus-visible { outline-offset: 6px; border-radius: 8px; }
.pds-tabs:not(.pds-is-enhanced) .pds-tabs__panel + .pds-tabs__panel { margin-top: 32px; border-top: 1px solid var(--pds-line); }


/* ---------------------------------------------------------------------
   6.15 Final CTA band: the one closing call to action on every page
   Site-wide rule: full width (edge to edge, no rounded box) and centre-
   aligned, so it reads unmistakably as the end of the page. One stack:
   H2 → one line of copy → button(s). No side photo, and no Petcademy
   icon, mark or watermark inside the band (Katie, round 2). Same
   component on Home and every organization page; only the copy and the
   button change (Home: "Start my membership"; organization pages: one
   "Book a demo"). The pets are the same on every page.

   The pets (round 4, Katie): Petcademy's own characters from the course
   animations, Harry the chow (purple collar, red "Harry" tag) and the
   cat (purple collar, "Betty" tag), peek up over the purple footer's top
   edge like peeking over a wall. Their bodies are hidden behind the
   footer, their heads rise into the band, centred under the button.
   No frame, arch or circle. Composition: option B in
   research/archive/cta-peek-compare.html. Static (no motion).
   - Artwork: assets/img/illustrations/cta-peek-harry-cat.webp (1600 × 938)
     and cta-peek-harry-cat-800.webp (800 × 469), transparent WebPs of the
     PNG masters beside them, rendered from Bailey's original Illustrator
     files, drawn as-is (credits: research/image-credits.md, "Final CTA —
     brand characters"). Don't swap in other pets per page.
   - The image's BOTTOM EDGE is the ledge, and it sits exactly on the
     band's bottom edge, which is the footer's top edge. The artwork's
     own margins (wider on the right, because Harry's shoulder is wider)
     centre the pair optically, so centre the image itself; don't nudge it.
   - The band must sit directly above .pds-footer (purple 900). With
     --pets it paints above the footer and doesn't clip, and the pets
     tuck 1px over the footer's edge, so no hairline of the band shows
     under them when the scaled image has a fractional height.
   - The pets start a clear gap below the button (never touching it) and
     scale with the viewport: 340px wide on phones and tablets (less on
     phones narrower than 380px, inside the 16–20px gutters), growing to
     460px on wide screens. Same size on a phone and a tablet, so the
     pets never shrink at the 500px breakpoint.
   - Decorative: alt="" on the image and aria-hidden on its wrapper (the
     CTA is the copy).
   <section class="pds-cta-band pds-cta-band--pets" aria-labelledby="final-title">
     <div class="pds-wrap pds-cta-band__inner">
       <h2 id="final-title" class="pds-h2 pds-cta-band__title">…</h2>
       <p class="pds-lede pds-cta-band__lede">…</p>
       <div class="pds-cta-row pds-cta-band__actions"><a class="pds-btn pds-btn--primary pds-btn--lg">…</a></div>
     </div>
     <div class="pds-cta-band__pets" aria-hidden="true">
       <img src="…/illustrations/cta-peek-harry-cat-800.webp"
            srcset="…/illustrations/cta-peek-harry-cat-800.webp 800w, …/illustrations/cta-peek-harry-cat.webp 1600w"
            sizes="(max-width: 500px) 340px, 460px" alt="" width="800" height="469" loading="lazy">
     </div>
   </section>
   Without __pets (and without --pets) the band is the plain centred stack.

   --mid (organization pages): a compact deep purple version of the same
   centred stack, used once mid-page, as the last thing in How Petcademy
   helps (pages/solutions.css S5). One line (that section's result), then
   one teal "Book a demo" (the button for every CTA on purple 900,
   DECISIONS #13). No pets, no icon, no side bar, no second button.
   <div class="pds-cta-band pds-cta-band--mid">
     <div class="pds-wrap pds-cta-band__inner">
       <h3 class="pds-cta-band__heading">The result</h3>
       <p class="pds-cta-band__line">…</p>
       <div class="pds-cta-row pds-cta-band__actions"><a class="pds-btn pds-btn--teal pds-btn--lg" href="…">Book a demo</a></div>
     </div>
   </div>
   --------------------------------------------------------------------- */
.pds-cta-band {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(72px, 9vw, 136px); text-align: center;
  background: /* white at the top (distinct from any purple 50 section above), purple 50 where it meets the footer */
    radial-gradient(560px 360px at 100% 100%, rgba(3, 218, 198, .16), transparent 65%), /* teal 200 glow */
    radial-gradient(580px 380px at 0% 100%, rgba(219, 178, 255, .55), transparent 65%),  /* purple 100 glow */
    linear-gradient(180deg, #fff 0%, var(--pds-purple-50) 78%);
  --pds-dots-fade: radial-gradient(ellipse 55% 60% at 50% 40%, #000 0%, transparent 78%); /* the hero's dot grid (section 4) */
}
.pds-cta-band__inner { display: flex; flex-direction: column; align-items: center; max-width: calc(880px + 2 * var(--pds-gutter)); }
.pds-cta-band__title { max-width: 22ch; }
.pds-cta-band__lede { margin-top: 20px; max-width: 54ch; }
.pds-cta-band__actions { justify-content: center; margin-top: 36px; }

/* The pets peeking over the footer's top edge.
   flow-root keeps the pets' -1px bottom margin inside the band (otherwise it collapses through and the
   band's own background would end below the pets); overflow: visible + z-index let that 1px paint over
   the footer's purple. */
.pds-cta-band--pets { display: flow-root; overflow: visible; z-index: 2; padding-top: clamp(64px, 7vw, 104px); padding-bottom: 0; }
.pds-cta-band__pets {
  width: clamp(340px, 32vw, 460px); margin: clamp(40px, 4vw, 56px) auto -1px; /* bottom: the ledge, 1px over the footer */
  pointer-events: none;
}
.pds-cta-band__pets img { display: block; width: 100%; height: auto; }

/* The mid-page variant (organization pages): compact, deep purple, the dot grid in white */
.pds-cta-band--mid {
  padding-block: clamp(44px, 4.6vw, 64px);
  background: /* the dark panels' purple 700 / purple 600 corner glows (8.6 featured card) */
    radial-gradient(620px 300px at 100% 0%, rgba(55, 0, 179, .95), transparent 65%),
    radial-gradient(520px 280px at 0% 100%, rgba(86, 0, 232, .32), transparent 62%),
    var(--pds-deep);
}
.pds-cta-band--mid::before { background-image: radial-gradient(rgba(255, 255, 255, .10) 1px, transparent 1.2px); }
.pds-cta-band__line {
  max-width: 44ch; font-size: clamp(1.1875rem, 1rem + .65vw, 1.625rem); font-weight: 500; line-height: 1.38;
  letter-spacing: -.015em; color: #fff; text-wrap: balance;
}
/* "The result" heading above the line: a real heading, so the outcome reads as the section's takeaway */
.pds-cta-band__heading {
  margin: 0 0 12px; font-size: clamp(1.75rem, 1.35rem + 1.4vw, 2.5rem); font-weight: 700; line-height: 1.15;
  letter-spacing: -.025em; color: #fff;
}
.pds-cta-band__heading + .pds-cta-band__line { font-weight: 400; color: rgba(255, 255, 255, .88); }
.pds-cta-band--mid .pds-cta-band__actions { margin-top: 24px; }
.pds-cta-band--mid :focus-visible { outline-color: var(--pds-focus-on-dark); }

@media (max-width: 500px) {
  .pds-cta-band__actions { align-self: stretch; }
  .pds-cta-band__actions .pds-btn { width: 100%; }
  .pds-cta-band__pets { width: min(calc(100% - 2 * var(--pds-gutter)), 340px); margin-top: 36px; }
  .pds-cta-band--mid { padding-block: 40px; }
  .pds-cta-band--mid .pds-cta-band__actions { margin-top: 20px; }
}

/* ---------------------------------------------------------------------
   6.16 Footer (one site-wide footer).
   Source order = visual order at every width: For Pet Parents →
   For Organizations → Company. No CSS `order`.
   --------------------------------------------------------------------- */
.pds-footer { position: relative; overflow: hidden; background: var(--pds-deep); color: #fff; padding: clamp(64px, 7vw, 96px) 0 28px; }
.pds-footer :focus-visible { outline-color: var(--pds-focus-on-dark); }
.pds-footer__mark { /* oversized pet-face watermark: logo-mark-white.png (the icon part of the logo) */
  position: absolute; right: -60px; bottom: -80px; width: 420px; opacity: .05; pointer-events: none;
}
.pds-footer__mark img { width: 100%; height: auto; }
.pds-footer .pds-wrap { position: relative; }
.pds-footer__top { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; }
.pds-footer__brand p { margin-top: 20px; max-width: 22ch; font-size: 1.375rem; font-weight: 500; line-height: 1.35; letter-spacing: -.01em; color: #fff; text-wrap: balance; }
.pds-footer__nav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1.2fr); gap: 32px; }
.pds-footer__head { font-size: var(--pds-fs-small); font-weight: 700; color: var(--pds-on-dark-label); letter-spacing: .01em; margin-bottom: 14px; }
.pds-footer__head--gap { margin-top: 28px; }
/* A heading that's a link ("For Organizations" → /solutions) looks exactly like the plain ones. It sits inside
   .pds-footer__col, so this undoes that column's link styles below (and sets .pds a[href]'s colour through its
   variables), which is why the selector names the column. */
.pds-footer__col .pds-footer__head a { display: inline; min-height: 0; font-size: inherit; --pds-link: currentColor; --pds-link-line: none; }
.pds-footer__col .pds-footer__head a:hover { --pds-link: #fff; --pds-link-line: underline; text-underline-offset: 3px; text-decoration-color: currentColor; }
.pds-footer__head a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.pds-footer__col ul { display: grid; gap: 2px; }
.pds-footer__col ul.pds-footer__split { display: block; columns: 2; column-gap: 24px; }
.pds-footer__split li { break-inside: avoid; }
.pds-footer__col a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; --pds-link: var(--pds-on-dark); font-size: 1rem; }
.pds-footer__col a:hover { --pds-link: #fff; --pds-link-line: underline; text-underline-offset: 4px; text-decoration-color: var(--pds-accent-on-dark); }
.pds-footer__col a[aria-current="page"] { --pds-link: #fff; font-weight: 700; } /* the page you're on, set by pds.js (Home has none) */
.pds-footer__utility {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px;
  margin-top: clamp(48px, 6vw, 80px); padding-top: 24px; border-top: 1px solid var(--pds-line-dark);
  font-size: var(--pds-fs-meta); color: var(--pds-on-dark);
}
.pds-footer__legal { display: flex; flex-wrap: wrap; gap: 0 20px; }
.pds-footer__legal a { display: inline-flex; align-items: center; min-height: 32px; --pds-link: var(--pds-on-dark); }
.pds-footer__legal a:hover { --pds-link: #fff; --pds-link-line: underline; text-underline-offset: 4px; }
.pds-footer__social { display: flex; gap: 8px; margin-left: auto; }
.pds-footer__social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--pds-line-dark); --pds-link: #fff; transition: background-color .15s ease; }
.pds-footer__social a:hover { background: rgba(255, 255, 255, .1); }
.pds-footer__social .pds-i { width: 20px; height: 20px; }

@media (max-width: 1240px) { .pds-footer__top { grid-template-columns: 1fr; } }
@media (max-width: 770px) { /* one stacked column; each group flows into 2 CSS columns inside itself */
  .pds-footer__nav { grid-template-columns: 1fr; gap: 28px; max-width: 560px; }
  .pds-footer__col ul { display: block; columns: 2; column-gap: 20px; }
  .pds-footer__col li { break-inside: avoid; }
  .pds-footer__col a { min-height: 40px; line-height: 1.3; } /* a label that wraps ("Pet Insurance Providers", "Powered by Petcademy") stays about one row tall, so both columns' rows still line up */
}
@media (max-width: 500px) {
  .pds-footer__brand p { font-size: 1.1875rem; }
  .pds-footer__utility { gap: 10px 20px; }
  .pds-footer__copy { flex-basis: 100%; }
  .pds-footer__social { margin-left: 0; }
  .pds-footer__mark { width: 260px; right: -40px; bottom: -40px; }
}


/* ---------------------------------------------------------------------
   6.17 Statement: a short closing line under a group of cards
   ("The result: …"). Replaces the old coloured side-bar callout, which
   the site-wide rules ban: a fully outlined, rounded panel with a round
   icon tile, never a thick coloured left border.
   <p class="pds-statement"><span class="pds-statement__icon" aria-hidden="true"><svg class="pds-i">…</svg></span><span>…</span></p>
   Inside a purple 50 section the panel turns white. The icon disc is the
   panel's tint (white on the purple 50 panel), so it never vanishes into
   its own panel.
   --------------------------------------------------------------------- */
.pds-statement {
  --pds-tint: #fff; /* the panel is purple 50, so its icon disc is white */
  display: flex; align-items: center; gap: 18px; max-width: 900px; margin-top: clamp(28px, 3.4vw, 44px);
  padding: 20px 26px; border-radius: var(--pds-r-card); background: var(--pds-mist); border: 1px solid var(--pds-line);
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.3125rem); font-weight: 500; line-height: 1.45; letter-spacing: -.01em; color: var(--pds-deep);
  text-wrap: pretty;
}
.pds-section--mist .pds-statement { background: #fff; --pds-tint: var(--pds-purple-50); }
.pds-statement__icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--pds-tint); color: var(--pds-action); }
.pds-statement__icon .pds-i { width: 22px; height: 22px; stroke-width: 2.2; }

@media (max-width: 500px) {
  .pds-statement { align-items: flex-start; gap: 14px; padding: 16px 18px; }
  .pds-statement__icon { width: 36px; height: 36px; }
  .pds-statement__icon .pds-i { width: 18px; height: 18px; }
}


/* ---------------------------------------------------------------------
   6.18 Equal tiles: a row of equal-importance items, every tile the same
   size at every width (site-wide rule). Used by the Home membership
   snapshot (4 tiles, each with a brand illustration: pages/home.css 1)
   and the organization-page challenge (3 tiles, each with an icon tile:
   the --3 variant below). Promoted from pages/home.css and
   pages/solutions.css in round 4.
   <ul class="pds-tiles">
     <li class="pds-tile">
       (an illustration: .pds-tile__art, pages/home.css; or an icon:
        <span class="pds-icon-tile pds-tile__icon" aria-hidden="true"><svg class="pds-i">…</svg></span>)
       <h3 class="pds-h3 pds-tile__title">Title</h3>
       <p class="pds-tile__text">One short line.</p>
     </li> …
   </ul>
   Default: 4 across from 1024px, an even 2 × 2 on tablets, stacked on
   phones (--rows: a short row each on phones). --3: 3 across from 901px, white tiles with a soft lift (for a
   purple 50 section), and below 901px each tile is a short row (icon on
   the left, title and line on the right), so the stack stays short.
   --------------------------------------------------------------------- */
.pds-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--pds-grid-gap); } /* 1fr rows: every tile the same size at every width */
.pds-tile {
  display: flex; flex-direction: column; padding: 26px 26px 30px;
  border-radius: var(--pds-r-card); border: 1px solid var(--pds-line);
  background: linear-gradient(180deg, var(--pds-mist) 0%, #fff 62%);
}
.pds-tile__title { font-size: 1.25rem; line-height: 1.3; text-wrap: balance; }
.pds-tile__text { margin-top: 8px; font-size: 1rem; line-height: 1.55; text-wrap: pretty; }
.pds-tile__icon { margin-bottom: 20px; }

.pds-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pds-tiles--3 .pds-tile { --pds-tint: var(--pds-purple-50); background: #fff; box-shadow: var(--pds-shadow-sm); }

@media (max-width: 1180px) {
  .pds-tile { padding: 24px 22px 28px; }
}
@media (max-width: 1023px) {
  .pds-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pds-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .pds-tiles--3 { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 12px; }
  .pds-tiles--3 .pds-tile {
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 18px;
    padding: 20px 24px 20px 20px;
  }
  .pds-tiles--3 .pds-tile__icon { grid-row: 1 / span 2; align-self: center; margin-bottom: 0; }
  .pds-tiles--3 .pds-tile__title { align-self: end; }
  .pds-tiles--3 .pds-tile__text { align-self: start; margin-top: 4px; }
}
@media (max-width: 500px) {
  .pds-tiles { grid-template-columns: 1fr; gap: 12px; }
  /* --rows: each tile is a short row, its picture or icon on the left beside the title and line, so the
     stack stays short (Home's membership tiles, About's How we train) */
  .pds-tiles--rows .pds-tile {
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; align-items: center;
    padding: 16px 18px 16px 14px; background: linear-gradient(90deg, var(--pds-mist) 0%, #fff 70%);
  }
  .pds-tiles--rows .pds-tile > :first-child { grid-row: 1 / span 2; margin: 0; }
  .pds-tiles--rows .pds-tile__title { align-self: end; font-size: var(--pds-fs-body-lg); }
  .pds-tiles--rows .pds-tile__text { align-self: start; margin-top: 4px; font-size: var(--pds-fs-meta); line-height: 1.5; }
  .pds-tiles--3 .pds-tile { column-gap: 14px; padding: 16px 18px 16px 14px; }
  .pds-tiles--3 .pds-tile__title { font-size: var(--pds-fs-body-lg); }
  .pds-tiles--3 .pds-tile__text { font-size: var(--pds-fs-meta); line-height: 1.5; }
}


/* ---------------------------------------------------------------------
   6.19 Video embed: a responsive 16:9 player (Vimeo) in a rounded frame
   Rescues & Shelters ("See Petcademy in action") and About (Bailey's
   video). Promoted from pages/solutions.css S2 when About became the
   second page to use it. The frame keeps 16:9 with aspect-ratio and
   shows deep "night" while the player loads; a soft lavender glow sits
   behind it. Up to 960px wide, centred; a narrower column narrows it.
   Click to play (SEO audit, 2026-10-31): the frame holds the video's
   still and a play button; pds.js 10 swaps in the Vimeo player on click
   (it starts at once), so no player code or cookie loads before that:
   <figure class="pds-embed"><div class="pds-embed__frame">
     <a class="pds-embed__play" href="https://vimeo.com/ID" data-embed="https://player.vimeo.com/video/ID?…&autoplay=1"
        data-embed-title="Video: …"><img src="…" alt="" width="…" height="…" loading="lazy">
       <span class="pds-embed__btn" aria-hidden="true"><svg class="pds-i"><use href="#i-play"/></svg></span>
       <span class="pds-sr">Play video: …</span></a>
   </div></figure>
   data-embed-title becomes the iframe's title: say what the video is
   (and its length, when known). The glow reaches past the frame, so a section
   holding a player clips sideways: on tablets and phones the glow would
   otherwise run past the screen edge and scroll the page sideways.
   --------------------------------------------------------------------- */
.pds-section:has(.pds-embed) { overflow-x: clip; }
.pds-embed { position: relative; max-width: 960px; margin: 0 auto; }
.pds-embed::before { /* decorative glow */
  content: ""; position: absolute; inset: -12% -8%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(219, 178, 255, .5), rgba(219, 178, 255, 0)); /* purple 100 glow */
}
.pds-embed__frame {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--pds-r-media); background: var(--pds-night); box-shadow: var(--pds-shadow-lg);
}
.pds-embed__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pds-embed__play { position: absolute; inset: 0; display: block; }
.pds-embed__play img { width: 100%; height: 100%; object-fit: cover; }
.pds-embed__btn { /* centred on the still (Katie, 2026-11-01); white shows on any still, light or purple */
  position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 72px; height: 72px;
  border-radius: 50%; background: #fff; color: var(--pds-action); box-shadow: var(--pds-shadow-lg);
  transform: translate(-50%, -50%); transition: transform .2s ease, background-color .2s ease;
}
.pds-embed__btn .pds-i { width: 28px; height: 28px; margin-left: 4px; } /* the triangle's optical centre */
.pds-embed__play:hover .pds-embed__btn,
.pds-embed__play:focus-visible .pds-embed__btn { background: var(--pds-lav); transform: translate(-50%, -50%) scale(1.06); }
/* The frame clips anything outside it, so the focus ring goes round the frame */
.pds-embed__play:focus-visible { outline: none; }
.pds-embed__frame:has(.pds-embed__play:focus-visible) { outline: 3px solid var(--pds-focus); outline-offset: 3px; }
@media (max-width: 500px) {
  .pds-embed__btn { width: 56px; height: 56px; }
  .pds-embed__btn .pds-i { width: 22px; height: 22px; margin-left: 3px; }
}

@media (max-width: 500px) {
  .pds-embed__frame { border-radius: var(--pds-r-md); }
}


/* ---------------------------------------------------------------------
   6.20 Page header (A1.3): centred H1 and lede, no visual (--compact: Pricing)
   Contact, Pricing, About and the Solutions hub. Promoted from
   pages/contact.css C1 when Pricing became the second page to use it.
   The purple benefit line and the centred button row were About's
   (pages/about.css AB1) until the Solutions hub became the second page
   to use them (2026-10-21). The hero's square, edge-to-edge
   purple 50 panel (--pds-grad-hero) and faded dot grid, shorter than a
   hero, so the next section shows in the first screen. The H1 and lede
   sit centred in an 860px column. The page's only <h1>; its root
   carries id="content", the skip-link target.
   <section class="pds-page-head" id="content" aria-labelledby="page-title">
     <div class="pds-wrap pds-page-head__inner">
       (optional) <p class="pds-eyebrow">…</p>
       <h1 id="page-title" class="pds-h1">…</h1>
       (optional, the benefit line: an H2 in the same type as the organization heroes' benefit line, 8.1)
       <h2 class="pds-page-head__benefit">…</h2>
       <p class="pds-lede pds-page-head__lede">…</p>
       (optional, one or two buttons, centred)
       <div class="pds-cta-row pds-page-head__actions"><a class="pds-btn pds-btn--primary pds-btn--lg" href="…">…</a></div>
       (optional, 2–3 reassurance items: the shared .pds-micro, 6.2, centred)
       <ul class="pds-micro"><li><svg class="pds-i" aria-hidden="true"><use href="#i-check"/></svg>…</li> …</ul>
     </div>
   </section>
   --------------------------------------------------------------------- */
.pds-page-head { /* the hero surface (section 4), its dots centred */
  text-align: center; padding: clamp(48px, 6.2vw, 96px) 0 clamp(52px, 6vw, 92px);
  --pds-dots-fade: radial-gradient(ellipse 52% 72% at 50% 46%, #000 0%, transparent 76%);
}
.pds-page-head__inner { max-width: calc(860px + 2 * var(--pds-gutter)); }
.pds-page-head .pds-eyebrow { margin-bottom: 14px; }
.pds-page-head__lede { max-width: 56ch; margin: 22px auto 0; text-wrap: balance; }
.pds-page-head .pds-micro { justify-content: center; margin-top: 24px; }
.pds-page-head__benefit, .pds-org-hero__benefit { /* one purple benefit line for both heroes (8.1) */
  margin-top: 14px; font-size: clamp(1.625rem, 1.05rem + 1.65vw, 2.5rem); font-weight: 700; line-height: 1.12;
  letter-spacing: var(--pds-track-h2); color: var(--pds-action); text-wrap: balance;
}
.pds-page-head__actions { justify-content: center; margin-top: 32px; }
/* --compact (Pricing): shorter padding, a smaller H1 in a wider column (one line from 1024px) and tighter gaps, so
   what follows the header shows in the first screen on a laptop (Katie, 2026-10-19). */
.pds-page-head--compact { padding-top: clamp(22px, 2.2vw, 32px); }
.pds-page-head--compact .pds-page-head__inner { max-width: calc(1120px + 2 * var(--pds-gutter)); }
.pds-page-head--compact .pds-eyebrow { margin-bottom: 10px; }
.pds-page-head--compact .pds-h1 { font-size: clamp(2rem, 1.3rem + 1.6vw, 2.75rem); } /* 32 → 44, a step below the other H1s */
.pds-page-head--compact .pds-page-head__lede { margin-top: 12px; }
.pds-page-head--compact .pds-micro { margin-top: 14px; }

@media (max-width: 500px) {
  .pds-page-head__benefit, .pds-org-hero__benefit { margin-top: 10px; }
  .pds-page-head__actions { margin-top: 26px; }
}


/* ---------------------------------------------------------------------
   6.21 Legal text (Terms, Privacy Policy, Disclaimer)
   A plain, readable column under the shared centred page header (6.20):
   no cards, no icons. The text is Bailey's legal copy, word for word, so
   the markup is only what the text needs: H2 section headings, H3
   sub-headings, paragraphs, bulleted lists, links.
   <section class="pds-section pds-legal" aria-label="…">
     <div class="pds-wrap"><div class="pds-legal__body"> <h2>…</h2> <p>…</p> … </div></div>
   </section>
   --------------------------------------------------------------------- */
.pds-legal { padding-block: clamp(40px, 5vw, 80px); }
.pds-legal__body { max-width: 760px; margin-inline: auto; font-size: var(--pds-fs-body); line-height: 1.7; color: var(--pds-deep); overflow-wrap: anywhere; }
.pds-legal__body > * + * { margin-top: 1em; }
.pds-legal__body h2 { margin-top: 2em; font-size: 1.125rem; font-weight: 700; line-height: 1.35; letter-spacing: .01em; color: var(--pds-deep); }
.pds-legal__body h2 + * { margin-top: .5em; }
.pds-legal__body h3 { margin-top: 1.5em; font-size: 1rem; font-weight: 700; line-height: 1.4; color: var(--pds-deep); }
.pds-legal__body h3 + * { margin-top: .4em; }
.pds-legal__body ul { padding-left: 1.5em; list-style: disc; } /* section 2 resets <ul> */
.pds-legal__body li + li { margin-top: .4em; }


/* ---------------------------------------------------------------------
   6.22 Full plan card (A7.2): the Home teaser card (pds.css 6.13) plus a
   feature list and its own checkout button (shared since 2026-10-21: Pricing and the six partner and
   renewal landing pages)
   <ul class="pds-plans pds-plans--full" role="list">
     <li class="pds-plan pds-plan--full" id="plan-starter">
       <h2 class="pds-plan__name">Starter</h2>
       (optional) <p class="pds-plan__badge">Best value</p>
       <p class="pds-plan__term">1 month of support</p>
       <p class="pds-plan__price">$20</p>
       <span class="pds-meter pds-meter--1" aria-hidden="true"><i></i> × 12</span>
       <ul class="pds-checks pds-plan__feats"><li><svg class="pds-i" aria-hidden="true"><use href="#i-check"/></svg>…</li> …</ul>
       <a class="pds-btn pds-btn--primary pds-btn--block pds-plan__cta" href="…">Get started now<span class="pds-sr"> with Starter, …</span></a>
     </li> …
   </ul>
   - Not a link (it holds a button), so it doesn't lift on hover.
   - Stacked: name, term, the price, then the duration meter. Names and
     terms are one line each, so the prices line up across the three
     cards; the cards stretch to one height and every button sits at the
     bottom (its row is the card's 1fr row), so the buttons line up too,
     whatever the number of features (2, 3 or 4).
   - "Best value" is the only label on the card's edge: centred on the
     top edge, a size up from the Home teaser's badge (Katie: it looked
     too small). It follows the name in the source, so a screen reader
     hears "Premium, Best value".
   - Featured (Premium): the deep purple card from 6.13; white text,
     teal 200 check discs (9.2:1) and the teal button (the CTA on purple
     900, DECISIONS.md #13).
   Up to 1023px the cards stack, one per row: on tablets each card is a
   short row (name, price, meter and button on the left; the
   features on the right); on phones (640 and below) it's stacked again.
   --------------------------------------------------------------------- */
/* Each <li> holds one card and stretches it, so the three cards share one height. */
.pds-plans--full { column-gap: var(--pds-grid-gap); align-items: stretch; padding-top: 18px; } /* the padding is the room the top-edge badge needs */
.pds-plans__item { display: grid; }
.pds-plan--full {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "name" "term" "price" "meter" "feats" "cta";
  grid-template-rows: auto auto auto auto 1fr auto;
  align-items: start;
  padding: 26px clamp(20px, 2vw, 28px) 22px;
  color: var(--pds-deep);
}
.pds-plan--full.pds-plan--featured { color: #fff; }
.pds-plan--full .pds-plan__name { font-size: 1.25rem; letter-spacing: -.01em; }
.pds-plan--full .pds-plan__term { margin-top: 2px; }
.pds-plan--full .pds-plan__price { align-self: start; margin-top: 10px; font-size: clamp(2.5rem, 2.1rem + 1vw, 3rem); } /* 40 → 48 */
.pds-plan--full .pds-meter { margin-top: 14px; }
.pds-plan--full .pds-plan__badge { /* centred on the top edge, a size up; teal 200 + purple 900 (9.2:1) */
  top: -17px; left: 50%; transform: translateX(-50%); padding: 7px 18px;
  font-size: var(--pds-fs-meta); letter-spacing: .01em; white-space: nowrap;
}

.pds-plan__feats {
  grid-area: feats; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--pds-line);
  gap: 8px;
}
.pds-plan__feats li { font-size: var(--pds-fs-meta); line-height: 1.45; text-wrap: pretty; }
.pds-plan__cta { grid-area: cta; align-self: end; margin-top: 20px; }
.pds-plan--featured .pds-plan__feats { border-top-color: var(--pds-line-dark); }
.pds-plan--featured .pds-plan__feats li { color: #fff; }
.pds-plan--featured .pds-plan__feats .pds-i { background: var(--pds-accent-on-dark); color: var(--pds-deep); }
.pds-plan--full.pds-plan--featured :focus-visible { outline-color: var(--pds-focus-on-dark); }

@media (max-width: 1023px) { /* one card per row: a short row, the features on the right */
  .pds-plans--full { row-gap: 36px; max-width: 760px; margin-inline: auto; }
  .pds-plans__item { display: block; }
  .pds-plan--full {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    grid-template-areas: "name feats" "term feats" "price feats" "meter feats" "cta feats";
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: 32px; padding: 30px 28px 26px;
  }
  .pds-plan__feats { align-self: center; margin-top: 0; padding: 4px 0 4px 32px; border-top: 0; border-left: 1px solid var(--pds-line); }
  .pds-plan--featured .pds-plan__feats { border-left-color: var(--pds-line-dark); }
}
@media (max-width: 640px) { /* phones: stacked again */
  .pds-plans--full { row-gap: 32px; }
  .pds-plan--full {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "name" "term" "price" "meter" "feats" "cta";
    grid-template-rows: auto auto auto auto 1fr auto;
    padding: 28px 20px 22px;
  }
  .pds-plan__feats { align-self: start; margin-top: 18px; padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--pds-line); }
  .pds-plan--featured .pds-plan__feats { border-top-color: var(--pds-line-dark); }
}


/* ---------------------------------------------------------------------
   6.23 Numbered steps: equal tiles with a large numeral, as an ordered list
   The shared equal tiles (6.18: 4 across from 1024px, an even 2 × 2 on
   tablets, stacked on phones), with a large numeral where the Home tiles
   have an illustration. Equal tiles, so no step looks more important
   than another. Membership's "How it works" and Powered by Petcademy's
   "Live in your product" (moved here from pages/product.css P2 on
   2026-10-22, when Powered by Petcademy became the second page).
   <ol class="pds-tiles pds-steps" role="list">
     <li class="pds-tile pds-step">
       <span class="pds-step__num" aria-hidden="true">1</span>
       <h3 class="pds-h3 pds-tile__title"><span class="pds-sr">Step 1: </span>Title</h3>
       <p class="pds-tile__text">One short line.</p>
     </li> …
   </ol>
   The numeral is decorative (aria-hidden): the step number is in the
   title for screen readers ("Step 1: …"), and role="list" keeps the list
   announced in Safari once its markers are removed.
   4 across only: a small arrow disc sits in each gap at the numerals'
   height, so the row reads as a sequence (decorative pseudo-elements;
   hidden in the 2 × 2 and stacked layouts, where it would point at
   nothing).
   --------------------------------------------------------------------- */
.pds-steps { --pds-step-num: clamp(3rem, 2.3rem + 1.7vw, 4rem); margin: 0; padding: 0; list-style: none; } /* pds.css resets <ul>, not <ol> */
.pds-step { position: relative; }
.pds-step__num {
  display: block; margin-bottom: 18px;
  font-size: var(--pds-step-num); font-weight: 700; line-height: 1; letter-spacing: -.04em;
  color: var(--pds-action); font-variant-numeric: tabular-nums;
}

@media (min-width: 1024px) {
  .pds-step:not(:last-child)::before,
  .pds-step:not(:last-child)::after {
    content: ""; position: absolute; pointer-events: none;
    top: calc(26px + var(--pds-step-num) / 2);
  }
  .pds-step:not(:last-child)::after { /* the disc, centred in the gap */
    z-index: 1; right: calc(var(--pds-grid-gap) / -2 - 16px);
    width: 32px; height: 32px; margin-top: -16px; border-radius: 50%;
    background: #fff; border: 1px solid var(--pds-line); box-shadow: var(--pds-shadow-sm);
  }
  .pds-step:not(:last-child)::before { /* the chevron on the disc */
    z-index: 2; right: calc(var(--pds-grid-gap) / -2 - 2px);
    width: 8px; height: 8px; margin-top: -4px;
    border-top: 2px solid var(--pds-action); border-right: 2px solid var(--pds-action); transform: rotate(45deg);
  }
}
@media (max-width: 500px) { /* stacked: numeral beside the title and line, so the list stays short */
  .pds-step {
    display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px;
    padding: 18px 20px 20px 16px;
  }
  .pds-step__num { grid-row: 1 / span 2; margin: 0; font-size: 2.75rem; }
  .pds-step .pds-tile__title { align-self: end; font-size: 1.125rem; }
  .pds-step .pds-tile__text { align-self: start; margin-top: 4px; font-size: var(--pds-fs-meta); line-height: 1.5; }
}


/* =====================================================================
   7. PAGE BLOCKS: HOME
   ===================================================================== */

/* ---- Home / Hero -----------------------------------------------------
   A full-bleed purple 50 panel with SQUARE corners, edge to edge (Katie,
   round 3: no rounded hero background on any page); the audience rail
   straddles its bottom edge so all nine organization types sit above the
   fold on laptops (rail top ≤ 760px at 1440×900, ≤ 640px at 1280×720). */
.pds-hero { position: relative; --pds-rail-overlap: 50px; }
.pds-hero__panel { padding: clamp(32px, 3.6vw, 52px) 0 calc(var(--pds-rail-overlap) + clamp(28px, 3vw, 40px)); } /* the hero surface (section 4) */
.pds-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.pds-hero__copy { max-width: 600px; }
.pds-hero__copy .pds-eyebrow { margin-bottom: 14px; }
.pds-hero__lede { margin-top: 22px; max-width: 520px; }
.pds-hero .pds-cta-row { margin-top: 32px; }

/* Composition: photo + phone mock + floating chips */
.pds-hero__visual { position: relative; height: 560px; }
.pds-hero__stage { position: absolute; inset: 0; }
.pds-hero__glow { left: -6%; top: 34%; width: 70%; height: 66%; } /* the blob (section 4) */
.pds-hero__photo { position: absolute; top: 0; left: 64px; right: 0; height: 64%; border-radius: var(--pds-r-media); overflow: hidden; box-shadow: var(--pds-shadow-lg); }
.pds-hero__photo picture { display: block; width: 100%; height: 100%; } /* a 16:10 crop, and its own crop on phones */
.pds-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.pds-hero__phone { position: absolute; left: 0; bottom: 0; z-index: 2; font-size: 10.8px; }
.pds-hero__floats { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.pds-hero__float { position: absolute; }
.pds-hero__float--reply { left: 252px; top: 55%; }
.pds-hero__float--album { right: 20px; top: 72%; }

/* Rail straddles the panel's bottom edge */
.pds-hero__rail { position: relative; z-index: 4; margin-top: calc(-1 * var(--pds-rail-overlap)); }

/* Laptops with short viewports (e.g. 1280×720, 1280×800): tighten so the rail stays above the fold */
@media (min-width: 1024px) and (max-height: 800px) {
  .pds-hero { --pds-fs-display: clamp(2.5rem, 1rem + 3.4vw, 3.5rem); }
  .pds-hero__panel { padding-top: 28px; padding-bottom: calc(var(--pds-rail-overlap) + 24px); }
  .pds-hero__lede { margin-top: 16px; }
  .pds-hero .pds-cta-row { margin-top: 24px; }
  .pds-hero__visual { height: 470px; }
  .pds-hero__phone { font-size: 9.2px; }
  .pds-hero__float--reply { left: 218px; }
}

@media (max-width: 1180px) {
  .pds-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pds-hero__photo { left: 40px; }
  .pds-hero__phone { font-size: 10px; }
  .pds-hero__float--reply { left: auto; right: 0; top: 50%; }
  .pds-hero__float--album { right: 0; top: 66%; }
  .pds-hero { --pds-rail-overlap: 64px; }
}
@media (max-width: 1023px) {
  .pds-hero__grid { grid-template-columns: 1fr; }
  .pds-hero__copy { max-width: 680px; }
  .pds-hero__visual { width: 100%; max-width: 640px; height: 520px; margin: 8px auto 0; }
  .pds-hero__phone { font-size: 10.4px; }
  .pds-hero__float--reply { left: 250px; right: auto; top: 56%; }
  .pds-hero__float--album { right: 12px; top: 72%; }
}
@media (max-width: 860px) { .pds-hero { --pds-rail-overlap: 90px; } }

/* Phones: chip cloud replaces the rail; floats stack beside the phone */
@media (max-width: 500px) {
  .pds-hero__panel { padding: 26px 0 32px; }
  .pds-hero__rail { display: none; }
  .pds-hero .pds-cta-row { margin-top: 26px; gap: 10px; }
  .pds-hero .pds-cta-row .pds-btn { padding: 0 20px; }
  .pds-hero .pds-cta-row .pds-btn--primary { flex: 1 1 auto; }
  .pds-hero__visual { height: auto; margin-top: 28px; }
  .pds-hero__stage { position: relative; inset: auto; height: 498px; }
  .pds-hero__glow { left: -10%; top: 40%; width: 80%; height: 60%; }
  /* The phone covers the photo's lower left, so the phone crop (rect=700,600,4000,2050 in the HTML) is pinned to the
     left edge: the face sits in the clear strip above the phone, the dog's head and collar to its right. */
  .pds-hero__photo { left: 0; height: 240px; border-radius: var(--pds-r-card); }
  .pds-hero__photo img { object-position: 0% 50%; }
  .pds-hero__phone { font-size: 9.4px; left: 0; top: 130px; bottom: auto; }
  .pds-hero__floats { inset: auto; left: calc(21.5 * 9.4px + 12px); right: 0; top: 256px; display: flex; flex-direction: column; gap: 10px; }
  .pds-hero__float { position: static; flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px 12px 12px; }
  .pds-hero__float small { white-space: normal; }
  .pds-float__icon { width: 30px; height: 30px; }
}
/* Narrowest phones (320–374): the column beside the phone is too thin for the chips (74px at 320),
   so they move under the phone as a row of two and the stage grows to fit them. */
@media (max-width: 374px) {
  .pds-hero__stage { height: auto; padding-top: 508px; }
  .pds-hero__floats { position: static; flex-direction: row; gap: 8px; }
  .pds-hero__float { flex: 1 1 0; min-width: 0; }
}

/* ---- Home / Results ---------------------------------------------- */
.pds-results { padding-top: clamp(44px, 5vw, 72px); padding-bottom: calc(var(--pds-section-y) * .5); }
.pds-results .pds-stats { margin-top: clamp(36px, 4vw, 56px); }
.pds-results .pds-trust { margin-top: clamp(36px, 4vw, 56px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--pds-line-dark); }


/* ---- Home / Pricing teaser ----------------------------------------- */
.pds-pricing__head { max-width: 860px; margin: 0 auto clamp(36px, 4vw, 56px); text-align: center; }
.pds-pricing__head .pds-lede { margin-top: 18px; }
.pds-pricing__foot { display: flex; flex-direction: column; align-items: center; gap: 28px; margin-top: clamp(32px, 3.4vw, 44px); text-align: left; }
.pds-pricing__foot .pds-checks { justify-content: center; }
@media (max-width: 770px) {
  .pds-pricing__head { text-align: left; margin-inline: 0; }
  .pds-pricing__foot { align-items: stretch; }
  .pds-pricing__foot .pds-checks--inline { display: grid; justify-content: start; }
}
@media (max-width: 500px) { .pds-pricing__foot .pds-btn { width: 100%; } }

/* ---- Home / Reviews ------------------------------------------------- */
.pds-reviews .pds-sec-head { margin-bottom: var(--pds-head-gap-tight); }

/* ---- Home / For organizations (short teaser: copy + dashboard, then the partner quote) ---- */
.pds-orgs {
  color: #fff; overflow: hidden;
  background:
    radial-gradient(900px 560px at 88% 4%, rgba(55, 0, 179, .9), transparent 62%),
    radial-gradient(700px 500px at 0% 100%, rgba(86, 0, 232, .26), transparent 60%), /* purple 600 glow, not teal (no off-palette navy) */
    var(--pds-deep);
}
.pds-orgs::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.2px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 55%); mask-image: linear-gradient(180deg, #000 0%, transparent 55%);
}
.pds-orgs :focus-visible { outline-color: var(--pds-focus-on-dark); }
.pds-orgs .pds-wrap { position: relative; }
.pds-orgs__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 80px); align-items: center; }
.pds-orgs__copy .pds-h2 { margin-top: 18px; }
.pds-orgs__copy .pds-lede { margin-top: 22px; }
.pds-orgs__copy .pds-cta-row { flex-direction: column; align-items: flex-start; gap: 22px; margin-top: 36px; } /* button, then the link under it, at every width */
.pds-orgs__art { display: block; width: 100%; height: auto; }
@media (max-width: 1180px) { .pds-orgs__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } /* small laptops: more room for the copy */
@media (max-width: 1023px) { .pds-orgs__top { grid-template-columns: 1fr; } }
@media (max-width: 500px) {
  .pds-orgs .pds-cta-row { align-items: stretch; }
}

/* ---- Home / Final CTA: the shared full-width, centred .pds-cta-band (6.15); no Home-only rules ---- */


/* =====================================================================
   8. PAGE BLOCKS: SOLUTIONS (the template for all nine organization pages)
   ---------------------------------------------------------------------
   Built for /solutions/rescues-shelters and reused unchanged by the
   other eight (same layout; change copy + images only).
   Several blocks here are now shared beyond the organization pages (the
   hero, the big numbers, the icon cards, the quotes, the FAQ); each block
   says who uses it. Shared components reused as-is: .pds-h1/h2/h3,
   .pds-lede, .pds-btn, .pds-micro, .pds-icon-tile, .pds-checks,
   .pds-phone, .pds-float, .pds-logos__row, .pds-panel-dark, .pds-tabs,
   .pds-acc, .pds-more, .pds-crumbs (5), .pds-statement (6.17),
   .pds-cta-band (6.15).

     8.1  Hero with a visual          .pds-org-hero (--proof)  .pds-trusted (the card: Rescues & Shelters only)
     8.2  Key benefits (no heading)   .pds-benefit-row
     8.3  Results that matter         .pds-bignums  .pds-bignum
     8.4  The challenge               the shared equal tiles, .pds-tiles--3 (6.18)
     8.5  How Petcademy helps         .pds-program  .pds-caretypes (+ the mid-page .pds-cta-band--mid, 6.15)
     8.6  What partners are saying    .pds-partner-grid  .pds-partner (--featured)
     8.7  What you get (tabs)         .pds-ftabs (the panels' layout: pages/solutions.css S6)
     8.8  Set-up points + chips       .pds-setup__point  .pds-chips  .pds-chips__link
     8.9  Budget / ROI panel shell    .pds-roi
     8.10 FAQ                         .pds-faq  .pds-acc__q
     8.11 Photo hero (Membership, landing pages) .pds-photo-hero (__visual, __stage, __glow, __photo, __phone)
     Final CTA: the shared .pds-cta-band--pets (6.15), no page-only rules.
   The round 2–4 redesigns of these blocks (and the R&S-only video) are
   in pages/solutions.css, loaded after this file.
   ===================================================================== */

/* ---- 8.1 Hero with a visual -------------------------------------------
   THE page hero for every page with a picture: the nine organization pages, Integrations, Powered by Petcademy,
   Membership and the refreshed landing pages. One component: breadcrumb (optional), H1, the purple benefit line,
   the lede, the buttons, and a visual slot on the right. Only the copy and the visual change:
   - the dashboard art + phone + two round pet photos (organization pages, below);
   - a photo with the phone (.pds-photo-hero, 8.11: Membership, Adopter bonus, AdopterLuv);
   - an illustration (Integrations, pages/integrations.css INT1) or a screenshot (Powered by Petcademy, PB1).
   It sits on the hero surface (section 4). One top and bottom padding everywhere; --proof adds room under the
   panel for the "Trusted by" card, which straddles its bottom edge like Home's audience rail (Rescues & Shelters).
   The lede keeps one measure (44ch, about Home's 520px) and balanced lines, so a short subhead and a longer
   live line both wrap evenly. */
.pds-org-hero { position: relative; --pds-proof-overlap: 0px; }
.pds-org-hero--proof { --pds-proof-overlap: 52px; }
.pds-org-hero__panel { padding: clamp(28px, 3.2vw, 44px) 0 calc(var(--pds-proof-overlap) + clamp(36px, 3.6vw, 52px)); } /* the hero surface (section 4) */
.pds-org-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.pds-org-hero__copy { max-width: 600px; }
.pds-org-hero__lede { margin-top: 20px; max-width: 44ch; text-wrap: balance; } /* the benefit line above it: 6.20 */
.pds-org-hero .pds-cta-row { margin-top: 32px; }

/* Product visual: dashboard (browser) + phone thread + one floating chip */
.pds-org-hero__stage { position: relative; height: 500px; }
.pds-org-hero__glow { left: -4%; bottom: -4%; width: 64%; height: 72%; } /* the blob (section 4) */
.pds-org-hero__dash { position: absolute; top: 0; right: 0; width: calc(100% - 150px); font-size: 11px; }
.pds-org-hero__dash.pds-org-hero__dash--art { width: calc(100% - 100px); height: auto; } /* wider than the HTML mock was, so the phone overlaps more of it */ /* drawn SVG dashboard in place of the HTML mock; the picture carries its own shadow */
/* Composition rule (every breakpoint): the dashboard's left offset = phone width (21.5em of the phone's
   font-size) minus the dashboard's icon sidebar, so the phone only ever covers that sidebar, never data. */
.pds-org-hero__phone { position: absolute; left: 0; bottom: 0; z-index: 2; font-size: 9.4px; }
.pds-org-hero__float { position: absolute; z-index: 3; left: 236px; bottom: 22px; }
/* Round pet photos floating around the product visual (cropped from the pet collage) */
.pds-org-hero__pet { position: absolute; z-index: 3; border-radius: 50%; border: 4px solid #fff; box-shadow: var(--pds-shadow-lg); background: #fff; }
.pds-org-hero__pet--a { top: -18px; left: 6px; width: 104px; height: 104px; }
.pds-org-hero__pet--b { right: 0; bottom: 96px; width: 104px; height: 104px; }


/* "Trusted by" card */
.pds-org-hero__proof { position: relative; z-index: 4; margin-top: calc(-1 * var(--pds-proof-overlap)); }
.pds-trusted {
  display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: center; gap: 16px 40px;
  padding: 18px 28px 18px 32px; background: #fff; border: 1px solid var(--pds-line); border-radius: 26px; box-shadow: var(--pds-shadow-rail);
}
.pds-trusted__label { font-size: var(--pds-fs-meta); font-weight: 500; line-height: 1.45; color: var(--pds-deep); }
.pds-trusted .pds-trusted__row { margin-top: 0; justify-content: space-between; gap: 12px 20px; }
.pds-trusted .pds-logo-item--wide img { height: 50px; max-width: 150px; }
.pds-trusted .pds-logo-item--round img { height: 72px; max-width: 80px; }
.pds-trusted .pds-logo-item--long img { height: 38px; max-width: 200px; } /* a very long wordmark (Charleston Animal Society): sized by height, about 200px wide, so its words stay readable */

@media (max-width: 1240px) {
  .pds-trusted { grid-template-columns: 1fr; padding: 22px 28px; }
  .pds-trusted__label { text-align: center; }
}
@media (max-width: 1180px) {
  .pds-org-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pds-org-hero__stage { height: 440px; }
  .pds-org-hero__dash { width: calc(100% - 138px); font-size: 10px; }
  .pds-org-hero__phone { font-size: 9px; }
  .pds-org-hero__float { left: auto; right: 0; bottom: 34px; }
}
@media (max-width: 1023px) {
  .pds-org-hero__grid { grid-template-columns: 1fr; }
  .pds-org-hero__copy { max-width: 680px; }
  .pds-org-hero__visual { width: 100%; max-width: 680px; margin: 8px auto 0; }
  .pds-org-hero__stage { height: 470px; }
  .pds-org-hero__dash { width: calc(100% - 150px); font-size: 11px; }
  .pds-org-hero__phone { font-size: 9.6px; }
  .pds-org-hero__float { left: 236px; right: auto; bottom: 22px; }
  /* Tablet: six logos as two even rows of three, never 5 + 1 */
  .pds-trusted .pds-trusted__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; gap: 18px 24px; }
  /* Seven logos (Rescues & Shelters): the lone last one sits in the middle column, under the centre of the row */
  .pds-trusted .pds-trusted__row > li:last-child:nth-child(3n+1) { grid-column: 2; }
}
@media (max-width: 640px) {
  .pds-org-hero__stage { height: 400px; }
  .pds-org-hero__dash { width: calc(100% - 124px); font-size: 9px; }
  .pds-org-hero__phone { font-size: 8.4px; }
  .pds-org-hero__float { display: none; }
}
@media (max-width: 500px) {
  .pds-org-hero--proof { --pds-proof-overlap: 28px; }
  .pds-org-hero__panel { padding-top: 22px; }
  .pds-org-hero__lede { margin-top: 14px; }
  .pds-org-hero .pds-cta-row { margin-top: 24px; gap: 10px; }
  .pds-org-hero .pds-cta-row .pds-btn { flex: 1 1 100%; }
  /* Phones: the dashboard would shrink to ~7px text, so it is hidden and the phone
     thread shows alone at Home's readable 9.4px scale. */
  .pds-org-hero__visual { margin-top: 28px; }
  .pds-org-hero__stage { height: auto; }
  .pds-org-hero__dash { display: none; }
  .pds-org-hero__phone { position: relative; margin: 0 auto; font-size: 9.4px; }
  .pds-trusted { padding: 18px 16px; border-radius: var(--pds-r-card); }
  .pds-trusted__label { font-size: var(--pds-fs-small); }
  .pds-trusted .pds-trusted__row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; }
  .pds-trusted .pds-logo-item--wide img { height: 36px; max-width: 96px; }
  .pds-trusted .pds-logo-item--long img { height: 36px; max-width: 100%; }
  .pds-trusted .pds-logo-item--round img { height: 56px; }
  .pds-trusted .pds-logos__row > li:last-child:nth-child(odd) { grid-column: auto; }
  .pds-trusted .pds-trusted__row > li:last-child:nth-child(3n+1) { grid-column: 2; } /* seven logos: the lone last one stays centred */
}

/* ---- 8.2 Key benefits: plain copy directly above Results --------------
   Katie, rounds 3–4: the four key benefits are PLAIN COPY, the lead-in
   to "Results that matter", inside the same section and directly above
   the dark panel. NO heading (round 4: the lines lead straight into
   Results, as Calm and Zendesk do; "Key benefits" is only the list's
   accessible name), no pills, no icons, no boxes. Each benefit is a short
   bold label + one line; a hairline with a short teal 700 tick above each
   column is the only structure. Equal-importance items, same style.
   4 columns from 1024px, an even 2 × 2 on tablets, stacked on phones.
   Promoted from pages/solutions.css S1 in round 4: any page that needs a
   quiet row of 4 equal points can use it.
   <ul class="pds-benefit-row" aria-label="Key benefits">
     <li><p class="pds-benefit-row__title">Save staff time</p><p>One line.</p></li> …
   </ul> */
.pds-benefit-row {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px clamp(24px, 3vw, 48px);
  margin-bottom: clamp(40px, 4.4vw, 60px);
}
.pds-benefit-row li { position: relative; padding-top: 18px; border-top: 1px solid var(--pds-line); }
.pds-benefit-row li::before { /* short teal tick on the hairline */
  content: ""; position: absolute; left: 0; top: -1px; width: 28px; height: 2px; border-radius: 2px; background: var(--pds-accent);
}
.pds-benefit-row__title { font-size: var(--pds-fs-body-lg); font-weight: 700; line-height: 1.35; letter-spacing: -.005em; color: var(--pds-deep); }
.pds-benefit-row__title + p { margin-top: 6px; max-width: 34ch; font-size: var(--pds-fs-meta); line-height: 1.55; text-wrap: pretty; }
/* 4 columns: labels and lines share rows (subgrid), so a label that wraps to two lines
   (e.g. "Improve adoption outcomes" at 1024px) doesn't push its line out of step with its
   neighbours. Browsers without subgrid simply keep the plain layout above. */
@media (min-width: 1024px) {
  @supports (grid-template-rows: subgrid) {
    .pds-benefit-row { row-gap: 0; }
    .pds-benefit-row li { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
  }
}
@media (max-width: 1023px) { /* tablets: an even 2 × 2 */
  .pds-benefit-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; }
}
@media (max-width: 500px) { /* phones: stacked */
  .pds-benefit-row { grid-template-columns: 1fr; gap: 20px; margin-bottom: 36px; }
  .pds-benefit-row li { padding-top: 14px; }
  .pds-benefit-row__title { font-size: 1rem; }
  .pds-benefit-row__title + p { margin-top: 4px; max-width: none; }
}

/* ---- 8.3 Results that matter: big typographic numbers ------------------
   Title top-left, footnote + CTA bottom-left, 2×2 numbers on the right.
   DOM order = title, numbers, footnote, CTA. */
.pds-bignums {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  grid-template-areas: "title nums" "foot nums"; gap: 32px clamp(40px, 5vw, 80px);
  padding: clamp(36px, 4.6vw, 64px);
}
.pds-bignums__title { grid-area: title; max-width: 9ch; }
.pds-bignums__grid { grid-area: nums; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pds-bignums__foot { grid-area: foot; align-self: end; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.pds-footnote--on-dark { color: var(--pds-on-dark); max-width: 40ch; }
.pds-bignum { padding: 30px 0 30px 32px; border-top: 1px solid var(--pds-line-dark); border-left: 1px solid var(--pds-line-dark); }
.pds-bignum:nth-child(odd) { padding-left: 0; padding-right: 32px; border-left: 0; }
.pds-bignum:nth-child(-n + 2) { padding-top: 0; border-top: 0; }
.pds-bignum:nth-last-child(-n + 2) { padding-bottom: 0; }
.pds-bignum__num {
  /* Capped at 80px (not the scale's 84px): at 84px "2 million+" is 2px wider than its column on screens over ~1650px
     and wrapped (Katie, 2026-11-05). It still may wrap, so larger text spacing (WCAG 1.4.12) never overflows. */
  font-size: min(var(--pds-fs-stat-lg), 5rem); font-weight: 700; line-height: 1; letter-spacing: -.045em;
  color: #fff; font-variant-numeric: tabular-nums;
}
.pds-bignum__pre { white-space: nowrap; margin-right: .12em; font-size: .3em; font-weight: 700; letter-spacing: -.01em; color: var(--pds-accent-on-dark); } /* "Up to" sits on the number's baseline */
.pds-bignum__unit { color: var(--pds-accent-on-dark); } /* teal 200 on purple 900 (9.2:1) */
.pds-bignum__unit--word { font-size: .46em; letter-spacing: -.02em; }
.pds-bignum__label { margin-top: 14px; max-width: 28ch; font-size: var(--pds-fs-body-lg); line-height: 1.45; color: var(--pds-on-dark); }
/* A partner's logo as the result: the wordmark in white, with its label below */
.pds-bignum__logo { display: block; }
.pds-bignum__logo img { display: block; width: auto; height: 48px; max-width: 100%; filter: brightness(0) invert(1); } /* the dark wordmark, shown white on purple 900 */
@media (max-width: 500px) { .pds-bignum__logo img { height: 34px; } }

@media (max-width: 1180px) {
  .pds-bignums { grid-template-columns: 1fr; grid-template-areas: "title" "nums" "foot"; }
  .pds-bignums__title { max-width: none; }
  .pds-bignums__foot { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
}
@media (max-width: 500px) {
  .pds-bignums { padding: 32px 20px 28px; gap: 28px; }
  .pds-bignum { padding: 22px 0 22px 14px; }
  .pds-bignum:nth-child(odd) { padding-right: 14px; }
  .pds-bignum__num { font-size: 2rem; letter-spacing: -.05em; }
  .pds-bignum__pre { font-size: 13px; }
  .pds-bignum__label { margin-top: 10px; font-size: var(--pds-fs-small); }
  .pds-bignums__foot .pds-btn { width: 100%; }
}
@media (max-width: 359px) { .pds-bignum__num { font-size: 1.6875rem; } } /* "400,000+" can't wrap; fits a 320px phone */

/* ---- 8.4 The challenge ------------------------------------------------
   Round 4: 3 compact equal tiles (icon, title, one short line), no photos:
   the shared .pds-tiles .pds-tiles--3 (6.18). Section spacing and the
   one-line heading: pages/solutions.css S4. */

/* ---- 8.5 How Petcademy helps ------------------------------------------ */
.pds-program {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 32px clamp(32px, 4vw, 64px);
  padding: clamp(28px, 4.4vw, 64px); border-radius: var(--pds-r-panel); --pds-tint: #fff; /* purple 50 panel: white small fills */
  background: radial-gradient(560px 380px at 0% 0%, rgba(255, 255, 255, .85) 0%, transparent 70%), var(--pds-lav);
}
.pds-program__title { font-size: clamp(1.5rem, 1.2rem + .9vw, 2rem); letter-spacing: -.02em; }
.pds-program__intro { margin-top: 12px; font-size: var(--pds-fs-lede); line-height: 1.5; color: var(--pds-deep); }
.pds-program__list { margin-top: 24px; gap: 14px; }
.pds-program__list li { font-size: var(--pds-fs-body-lg); }
.pds-program__art img { width: 100%; max-width: 360px; height: auto; margin: 0 auto; }
.pds-caretypes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pds-grid-gap); margin-top: var(--pds-grid-gap); }
/* Each card spans two rows of the parent grid (subgrid), so the body text starts at the same height
   in every card even when one title wraps to more lines than its siblings. */
.pds-caretype { --pds-tint: var(--pds-purple-50); display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 14px; padding: clamp(22px, 2.4vw, 32px); border-radius: var(--pds-r-card); background: #fff; border: 1px solid var(--pds-line); } /* white card: purple 50 icon tile, even on a purple 50 section */
.pds-caretype__head { display: flex; align-items: flex-start; gap: 14px; }
.pds-caretype__head .pds-h3 { padding-top: 9px; text-wrap: balance; } /* padding centres a one-line title on the 48px tile */

@media (max-width: 1023px) {
  .pds-program { grid-template-columns: minmax(0, 1fr) 220px; }
}
@media (max-width: 900px) {
  .pds-caretypes { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pds-program { grid-template-columns: 1fr; }
  .pds-program__art { order: -1; } /* image only: reading/focus order unaffected */
  .pds-program__art img { max-width: 132px; margin: 0; }
  .pds-caretype { padding: 20px; }
}
@media (max-width: 500px) { /* the 40px icon tile (6.1): the title stays centred on it */
  .pds-caretype__head { gap: 12px; }
  .pds-caretype__head .pds-h3 { padding-top: 6px; }
}

/* ---- 8.6 What partners are saying -------------------------------------
   Featured card (deep purple) + two cards visible; "Show more" (pds.js)
   reveals the rest. Without JS every card shows. The same grid carries
   the pet-parent reviews on Home and Membership, with ratings and
   lettered avatars added by .pds-reviews (end of this block). */
.pds-partner-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--pds-grid-gap); }
.pds-partner { grid-column: span 4; display: flex; }
.pds-partner:nth-child(2), .pds-partner:nth-child(3) { grid-column: span 6; }
.pds-partner > figure { display: flex; flex-direction: column; width: 100%; padding: clamp(24px, 2.4vw, 32px); border-radius: var(--pds-r-card); background: #fff; border: 1px solid var(--pds-line); }
.pds-partner blockquote p { font-size: var(--pds-fs-body-lg); line-height: 1.6; color: var(--pds-deep); }
.pds-partner__by { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 22px; font-size: var(--pds-fs-small); line-height: 1.45; color: var(--pds-muted); }
.pds-partner__by img { width: 52px; height: 52px; flex: none; border-radius: 50%; object-fit: cover; }
.pds-partner__by strong { display: block; font-size: .96875rem; color: var(--pds-deep); }
.pds-partner__by .pds-initial { width: 52px; height: 52px; font-size: 1.25rem; } /* lettered avatar at the headshot size (partners without a photo) */

.pds-partner--featured { grid-column: span 6; grid-row: span 2; }
.pds-partner--featured > figure {
  justify-content: space-between; gap: 32px; padding: clamp(32px, 4vw, 56px); border-color: var(--pds-deep); color: #fff;
  background: radial-gradient(520px 360px at 100% 0%, rgba(55, 0, 179, .95), transparent 65%), radial-gradient(420px 300px at 0% 100%, rgba(86, 0, 232, .30), transparent 62%), var(--pds-deep); /* purple 600 glow, not teal */
}
.pds-partner--featured blockquote p {
  font-size: clamp(1.5rem, 1.05rem + 1.35vw, 2.25rem); font-weight: 500; line-height: 1.28; letter-spacing: -.02em;
  color: #fff; text-wrap: balance; text-indent: -.42em; /* hang the opening mark */
}
.pds-partner--featured .pds-partner__by { margin-top: 0; padding-top: 24px; border-top: 1px solid var(--pds-line-dark); font-size: var(--pds-fs-meta); color: var(--pds-on-dark); }
.pds-partner--featured .pds-partner__by img { width: 64px; height: 64px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .18); }
.pds-partner--featured .pds-partner__by strong { color: #fff; font-size: var(--pds-fs-body-lg); }
.pds-partner--featured .pds-partner__by a { --pds-link: #fff; text-decoration-color: rgba(3, 218, 198, .8); }
.pds-partner--featured :focus-visible { outline-color: var(--pds-focus-on-dark); }

.pds-partner-grid.pds-is-collapsed > li:nth-child(n + 4) { display: none; }
@media (max-width: 500px) { .pds-partner-grid.pds-is-collapsed > li:nth-child(n + 3) { display: none; } }

@media (max-width: 1023px) {
  .pds-partner, .pds-partner:nth-child(2), .pds-partner:nth-child(3) { grid-column: span 6; }
  .pds-partner--featured { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 640px) {
  .pds-partner, .pds-partner:nth-child(2), .pds-partner:nth-child(3) { grid-column: 1 / -1; }
  .pds-partner--featured blockquote p { text-indent: 0; }
}

/* Pet-parent reviews (.pds-reviews on the section: Home "Pet parents love Petcademy", Membership
   "What pet parents say"). The same grid and cards as above, plus:
   - a rating above the quote, only where the live review has one: stars + the visible "5/5" in brand
     teal (stars teal 700 from 6.10; the number teal 800, 5.7:1 on white; both teal 200 on the purple
     card, 9.2:1)
   - lettered avatars (.pds-initial, 6.10) at the headshot size for reviewers without a photo,
     including on the featured card (64px, like the featured headshot)
   - the featured card keeps its rating and quote together at the top and the name line at the bottom
   - on tablets an odd last card runs full width, so no card sits alone on half a row (both pages have
     6 reviews; R&S has 9 partner quotes)
   Promoted from pages/home.css section 2 when Membership became the second page to use it. */
.pds-reviews .pds-partner .pds-stars { margin-bottom: 14px; }
.pds-reviews .pds-stars__num { color: var(--pds-teal-800); }
.pds-reviews .pds-partner__by .pds-initial { width: 52px; height: 52px; font-size: 1.25rem; }
.pds-reviews .pds-partner--featured > figure { justify-content: flex-start; gap: 0; }
.pds-reviews .pds-partner--featured .pds-stars { margin-bottom: 22px; }
.pds-reviews .pds-partner--featured .pds-stars__row .pds-i { width: 22px; height: 22px; color: var(--pds-accent-on-dark); --pds-fill-stroke: var(--pds-accent-on-dark); }
.pds-reviews .pds-partner--featured .pds-stars__num { font-size: 1rem; color: var(--pds-accent-on-dark); }
.pds-reviews .pds-partner--featured blockquote { margin-bottom: 32px; }
.pds-reviews .pds-partner--featured .pds-partner__by { margin-top: auto; }
.pds-reviews .pds-partner--featured .pds-partner__by .pds-initial { width: 64px; height: 64px; font-size: 1.5rem; box-shadow: 0 0 0 3px rgba(255, 255, 255, .18); }

@media (min-width: 641px) and (max-width: 1023px) {
  .pds-reviews .pds-partner:last-child:nth-child(even) { grid-column: 1 / -1; }
}

/* ---- 8.7 What you get: feature tabs ------------------------------------
   pds.js (section 4) makes the tablist work; without JS the list stays
   hidden and the panels show stacked (.pds-tabs fallback).
   Works with 3, 4 or 5 tabs, no CSS change: equal columns on wider
   screens, pairs on phones (an odd last tab spans the full row). */
.pds-ftabs .pds-ftabs__list {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; gap: 6px; padding: 6px;
  border-radius: 22px; background: var(--pds-mist); border: 1px solid var(--pds-line);
}
.pds-ftabs .pds-ftabs__tab {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 8px 14px;
  border-radius: var(--pds-r-md); line-height: 1.25; text-align: left;
}
.pds-ftabs__tab .pds-i { width: 22px; height: 22px; flex: none; color: var(--pds-muted-2); }
.pds-ftabs__tab:hover .pds-i, .pds-ftabs__tab[aria-selected="true"] .pds-i { color: var(--pds-action); }
.pds-ftabs .pds-ftabs__panel { padding-top: clamp(32px, 3.4vw, 48px); }
.pds-ftabs__panel:not([hidden]) { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 4.5vw, 72px); align-items: center; }
.pds-ftabs__title { font-size: clamp(1.5rem, 1.2rem + .9vw, 2rem); letter-spacing: -.02em; }
.pds-ftabs__intro { margin-top: 12px; max-width: 46ch; font-size: var(--pds-fs-lede); line-height: 1.5; }

@media (max-width: 1023px) {
  .pds-ftabs .pds-ftabs__tab { flex-direction: column; justify-content: center; gap: 6px; padding: 10px 8px; text-align: center; font-size: var(--pds-fs-small); }
  .pds-ftabs__panel:not([hidden]) { grid-template-columns: minmax(0, 1fr) 260px; }
}
@media (max-width: 770px) {
  .pds-ftabs__panel:not([hidden]) { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pds-ftabs .pds-ftabs__list { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pds-ftabs .pds-ftabs__tab { flex-direction: row; justify-content: flex-start; min-height: 52px; padding: 8px 12px; text-align: left; }
  .pds-ftabs .pds-ftabs__tab:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Icon + title + one line: What you get's features (.pds-minifeats, in each tab: pages/solutions.css S6) and Get set
   up's points (8.8) are one look (Katie, 2026-10-29): the small icon tile (6.1 --sm), a 16px title, a 15px line. */
.pds-minifeats { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 30px; max-width: 460px; }
.pds-minifeat, .pds-setup__point { display: flex; align-items: flex-start; gap: 14px; }
.pds-minifeat__title, .pds-setup__point .pds-h3 { font-size: 1rem; font-weight: 700; line-height: 1.35; letter-spacing: 0; color: var(--pds-deep); }
.pds-minifeat p, .pds-setup__point p { margin-top: 3px; font-size: var(--pds-fs-meta); line-height: 1.5; }
@media (max-width: 1023px) { .pds-minifeats { gap: 18px; margin-top: 24px; } }
@media (max-width: 770px) { .pds-minifeats { max-width: none; } }
@media (max-width: 640px) { .pds-minifeats { gap: 16px; margin-top: 22px; } }

/* ---- 8.8 Get set up: illustration, set-up points + integration chips (org pages, section 10) ---- */
.pds-setup__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5.5vw, 96px); align-items: center; }
.pds-setup__art { position: relative; overflow: hidden; aspect-ratio: 1 / .86; border-radius: var(--pds-r-panel); background: radial-gradient(420px 320px at 50% 30%, #fff 0%, transparent 72%), var(--pds-mist); border: 1px solid var(--pds-line); }
.pds-setup__art img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.12); transform-origin: 50% 44%; } /* whole dashboard visible; only the blob's empty edges are trimmed */
.pds-setup__float { position: absolute; left: 22px; bottom: 22px; z-index: 2; }
.pds-setup__copy .pds-lede { margin-top: 18px; max-width: 52ch; }
.pds-setup__points { display: grid; gap: 28px; margin-top: 36px; }
.pds-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pds-chips li {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: var(--pds-r-pill);
  background: #fff; border: 1px solid var(--pds-line); font-size: var(--pds-fs-meta); font-weight: 500; line-height: 1.2; color: var(--pds-deep);
}
/* "See all integrations →" as the LAST chip of the same row (round 3), not a separate link row: a link chip with
   a purple 700 outline, text and arrow (the plain chips are faint-bordered, purple 900 text), filled purple 700
   with white text on hover. Promoted from pages/solutions.css S8 in round 4.
   <li class="pds-chips__more"><a class="pds-chips__link" href="…">See all integrations <svg class="pds-i">…</svg></a></li> */
.pds-chips .pds-chips__more { min-height: 0; padding: 0; border: 0; background: none; }
.pds-chips__link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px 0 15px;
  border-radius: var(--pds-r-pill); background: #fff; border: 1.5px solid var(--pds-action);
  --pds-link: var(--pds-action); font-weight: 700; line-height: 1.2;
  transition: background-color .18s ease, color .18s ease;
}
.pds-chips__link .pds-i { width: 16px; height: 16px; stroke-width: 2.2; transition: transform .18s ease; }
.pds-chips__link:hover { background: var(--pds-action); --pds-link: #fff; }
.pds-chips__link:hover .pds-i { transform: translateX(2px); }
.pds-setup .pds-setup__note { margin-top: 12px; }

@media (max-width: 1023px) {
  .pds-setup__grid { grid-template-columns: 1fr; }
  /* Single column: the illustration would push the heading ~450px down, and the hero already
     shows the dashboard, so tablets and phones get the copy only. */
  .pds-setup__visual { display: none; }
}
@media (max-width: 500px) {
  .pds-chips li { font-size: var(--pds-fs-small); min-height: 34px; padding: 0 12px; }
  .pds-chips__link { min-height: 34px; padding: 0 10px 0 13px; }
}

/* ---- 8.9 Budget / ROI ------------------------------------------------- */
.pds-roi { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); overflow: hidden; border-radius: var(--pds-r-panel); background: #fff; border: 1px solid var(--pds-line); box-shadow: var(--pds-shadow-sm); }
.pds-roi__copy { padding: clamp(32px, 5vw, 72px); }
.pds-roi__copy .pds-lede { margin-top: 20px; max-width: 52ch; }
.pds-roi__copy .pds-cta-row { margin-top: 32px; }
.pds-roi__figs { display: grid; align-content: center; padding: clamp(32px, 4.4vw, 64px); background: radial-gradient(360px 260px at 100% 0%, rgba(255, 255, 255, .55), transparent 70%), var(--pds-teal-50); } /* teal 50 + purple 900 figures (14.8:1) */
.pds-roi__figs li + li { margin-top: 28px; padding-top: 28px; border-top: 1.5px solid rgba(35, 3, 106, .2); }
.pds-roi__num { font-size: var(--pds-fs-stat-lg); font-weight: 700; line-height: 1; letter-spacing: -.045em; color: var(--pds-deep); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pds-roi__label { margin-top: 8px; font-size: 1.125rem; font-weight: 500; line-height: 1.4; color: var(--pds-deep); }

@media (max-width: 900px) {
  .pds-roi { grid-template-columns: 1fr; }
  .pds-roi__figs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .pds-roi__figs li + li { margin-top: 0; padding-top: 0; padding-left: 24px; border-top: 0; border-left: 1.5px solid rgba(35, 3, 106, .2); }
}
@media (max-width: 500px) {
  .pds-roi__figs { padding: 26px 20px; gap: 16px; }
  .pds-roi__figs li + li { padding-left: 16px; }
  .pds-roi__num { font-size: 2.375rem; }
  .pds-roi__label { font-size: var(--pds-fs-meta); }
  .pds-roi__copy .pds-btn { width: 100%; }
}

/* ---- 8.10 FAQ (uses .pds-acc, 6.14) ------------------------------------ */
.pds-faq__inner { max-width: calc(800px + 2 * var(--pds-gutter)); }
.pds-faq .pds-acc__q { gap: 12px 16px; }
@media (max-width: 640px) {
  .pds-faq .pds-acc__q { position: relative; padding-right: 44px; font-size: var(--pds-fs-body-lg); }
  .pds-faq .pds-acc__q::after { position: absolute; right: 4px; top: 18px; }
}

/* ---- 8.11 Photo hero: a pet-parent photo with the phone mock overlapping it ----
   The shared page hero (8.1: H1, purple benefit line, narrow lede, buttons, the .pds-micro reassurance line) with
   a photo and a phone in place of the dashboard. Membership and the partner landing pages (moved here from
   pages/product.css P1 on 2026-10-30, when the landing pages became the second user). Same padding as every hero with a
   visual (8.1).
   <section class="pds-org-hero pds-photo-hero" …>  … the 8.1 copy column, then:
     <div class="pds-photo-hero__visual"><div class="pds-photo-hero__stage">
       <div class="pds-photo-hero__glow" aria-hidden="true"></div>
       <figure class="pds-photo-hero__photo"><picture>…</picture></figure>
       <div class="pds-phone pds-photo-hero__phone" role="img" aria-label="…">…</div>
     </div></div>
   - the photo (Unsplash; research/image-credits.md) sits top right, 5:4;
   - the phone mock (.pds-phone, 6.7) overlaps the photo's left edge and hangs below it, so it only ever covers the
     photo's left strip: choose and crop each photo so no face, pet or collar sits there;
   - a lavender glow sits behind both.
   --pds-photo-phone sets the phone's size (everything in it is in em) and --pds-photo-offset the photo's left edge.
   The stage is at least as tall as the phone, so the phone never rises above the photo.
   Phones (500px and below): the photo runs full width (its own 4:3 crop, a <source> in the HTML), and the phone
   overlaps the photo's bottom RIGHT corner.
   --------------------------------------------------------------------- */
.pds-photo-hero { --pds-photo-phone: 10.4px; --pds-photo-offset: 120px; }
.pds-photo-hero .pds-micro { margin-top: 18px; }

.pds-photo-hero__visual { position: relative; }
.pds-photo-hero__stage {
  position: relative; min-height: calc(39 * var(--pds-photo-phone) + 28px);
  padding: 0 0 64px var(--pds-photo-offset);
}
.pds-photo-hero__glow { left: -5%; bottom: -4%; width: 66%; height: 72%; } /* the blob (section 4) */
.pds-photo-hero__photo {
  position: relative; margin: 0; aspect-ratio: 5 / 4; overflow: hidden;
  border-radius: var(--pds-r-media); background: var(--pds-lav); box-shadow: var(--pds-shadow-lg);
}
.pds-photo-hero__photo picture, .pds-photo-hero__photo img { display: block; width: 100%; height: 100%; }
.pds-photo-hero__photo img { object-fit: cover; }
.pds-photo-hero__phone { position: absolute; left: 0; bottom: 0; z-index: 2; font-size: var(--pds-photo-phone); }
.pds-photo-hero__phone .pds-chat { gap: .6em; }

@media (max-width: 1180px) { /* two equal columns: a smaller phone, so it still covers only the photo's edge */
  .pds-photo-hero { --pds-photo-phone: 9.2px; --pds-photo-offset: 124px; }
  .pds-photo-hero__stage { padding-bottom: 56px; }
}
@media (max-width: 1023px) { /* stacked: the visual gets the full width, up to 640px, centred under the copy */
  .pds-photo-hero { --pds-photo-phone: 10.4px; --pds-photo-offset: 120px; }
  .pds-photo-hero__visual { width: 100%; max-width: 640px; margin: 12px auto 0; }
}
@media (max-width: 640px) {
  .pds-photo-hero { --pds-photo-phone: 9.2px; --pds-photo-offset: 124px; }
}
@media (max-width: 500px) {
  .pds-photo-hero { --pds-photo-phone: 8.6px; }
  /* The two buttons share a row, as on Home ("Log in" is short); the page hero's default stacks them */
  .pds-photo-hero .pds-cta-row { gap: 10px; }
  .pds-photo-hero .pds-cta-row .pds-btn { flex: 0 1 auto; padding: 0 20px; }
  .pds-photo-hero .pds-cta-row .pds-btn--primary { flex: 1 1 auto; }
  .pds-photo-hero__visual { margin-top: 28px; }
  .pds-photo-hero__stage { min-height: 0; padding: 0 0 calc(39 * var(--pds-photo-phone) - 44px); }
  .pds-photo-hero__photo { aspect-ratio: 4 / 3; border-radius: var(--pds-r-card); }
  .pds-photo-hero__glow { left: -8%; bottom: 0; width: 70%; height: 56%; }
  .pds-photo-hero__phone { left: auto; right: 0; }
}
@media (max-width: 374px) { /* narrowest phones: a slightly smaller phone, so it stays clear of the pet in the photo */
  .pds-photo-hero { --pds-photo-phone: 8px; }
}


/* =====================================================================
   10. MOTION (all decorative; off under prefers-reduced-motion)
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .pds-mobile:not([hidden]) { animation: pds-slide .28s cubic-bezier(.2, .8, .2, 1); }
  .pds-dd__panel:not([hidden]) { animation: pds-pop .18s ease-out; }
  .pds-dd__panel--mega:not([hidden]) { animation: pds-pop-mega .18s ease-out; }
}
@media (prefers-reduced-motion: reduce) {
  .pds, .pds *, .pds *::before, .pds *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}
@keyframes pds-slide { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pds-pop { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pds-pop-mega { from { transform: translate(-50%, -6px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }