/* Keyboard focus across the landing shell. */
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--pp-text); outline-offset: 2px; }
.pp-footer :focus-visible { outline-color: var(--pp-primary); }

html, body {
    margin: 0;
    padding: 0;
    background: var(--pp-bg);
    font-family: var(--pp-font-ui);
    color: var(--pp-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
a { color: inherit; }
button, a.btn { font-family: inherit; }

.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.skip-link:focus {
    left: 16px;
    top: 16px;
    width: auto;
    height: auto;
    padding: 10px 14px;
    background: var(--pp-text);
    color: var(--pp-text-on-dark);
    border-radius: 8px;
    z-index: 100;
    font-weight: 600;
}

.pp-wrap {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 24px;
}
@media (min-width: 768px) {
    .pp-wrap { padding: 0 40px; }
}

/* Nav --------------------------------------------------------- */
.pp-nav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(250, 249, 247, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--pp-border);
}
.pp-nav-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.pp-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.pp-brand-mark {
    width: 32px; height: 32px;
    border-radius: 10px;
    background: var(--pp-primary);
    overflow: hidden;
    display: flex;
}
.pp-brand-mark img, .pp-brand-mark picture { width: 32px; height: 32px; object-fit: cover; }
.pp-brand-name {
    font-family: var(--pp-font-display);
    font-weight: 700;
    font-size: 21px;
    color: var(--pp-text);
    letter-spacing: -0.4px;
}
/* Same rule as api/u.js and api/directory.js (each SSR function carries its
   own copy — no shared stylesheet), with one deliberate difference: this page
   renders a single link, so it is justified to the END and sits beside "Get
   the app" rather than stranded against the wordmark with a gap between. That
   is also where the homepage puts Sign in. The 860px floor matches the
   siblings — below it the nav collapses to brand + CTA everywhere. */
.pp-nav-links {
    display: none;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex: 1;
    min-width: 0;
}
@media (min-width: 860px) {
    .pp-nav-links { display: flex; }
}
.pp-nav-link {
    font-size: 14px;
    font-weight: 500;
    color: var(--pp-neutral-ink);
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 999px;
    white-space: nowrap;
}
.pp-nav-link:hover { color: var(--pp-text); }
.pp-nav-cta {
    min-height: 44px;
    background: var(--pp-text);
    color: var(--pp-text-on-dark);
    border: none;
    border-radius: 999px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

/* Breadcrumbs -------------------------------------------------- */
.pp-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 22px;
    font-size: 13px;
    color: var(--pp-neutral-ink);
    font-weight: 500;
}
.pp-crumbs a { text-decoration: none; }
.pp-crumbs a:hover { text-decoration: underline; }
.pp-crumbs span[aria-current] {
    color: var(--pp-text);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

/* Hero -------------------------------------------------------- */
.pp-hero { padding: 18px 0 8px; }
.pp-service-hero-photo {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    overflow: hidden;
    background: var(--pp-card);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pp-text);
}
.pp-service-hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* No-photo fallback: a slim decorative category accent, not an empty photo
   slot. The recovered space carries the real provider and booking details.
   The paws are brand brown at low opacity on every category hue. */
.pp-service-hero-photo-fallback {
    aspect-ratio: auto;
    height: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='%23382312' fill-opacity='0.07'%3E%3Cg transform='translate(8 10) scale(1.25) rotate(-18 12 12)'%3E%3Ccircle cx='7' cy='9' r='2.2'/%3E%3Ccircle cx='12' cy='6.5' r='2.2'/%3E%3Ccircle cx='17' cy='9' r='2.2'/%3E%3Cpath d='M12 11c-3 0-5.5 2.5-5.5 5 0 1.7 1.5 2.5 3 2.5 1 0 1.7-.4 2.5-.4s1.5.4 2.5.4c1.5 0 3-.8 3-2.5 0-2.5-2.5-5-5.5-5z'/%3E%3C/g%3E%3Cg transform='translate(52 54) scale(1.25) rotate(14 12 12)'%3E%3Ccircle cx='7' cy='9' r='2.2'/%3E%3Ccircle cx='12' cy='6.5' r='2.2'/%3E%3Ccircle cx='17' cy='9' r='2.2'/%3E%3Cpath d='M12 11c-3 0-5.5 2.5-5.5 5 0 1.7 1.5 2.5 3 2.5 1 0 1.7-.4 2.5-.4s1.5.4 2.5.4c1.5 0 3-.8 3-2.5 0-2.5-2.5-5-5.5-5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-size: 96px 96px;
}
.pp-name {
    font-family: var(--pp-font-display);
    font-weight: 700;
    font-size: clamp(28px, 4.6vw, 38px);
    color: var(--pp-text);
    margin: 0;
    letter-spacing: -0.5px;
    line-height: 1.1;
}
.pp-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}
.pp-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    background: var(--pp-card);
    border: 1px solid var(--pp-border);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--pp-neutral-ink);
    line-height: 1.2;
}
.pp-pill strong { color: var(--pp-text); font-weight: 700; }
.pp-pill-muted { color: var(--pp-neutral-ink); font-weight: 500; }
.pp-pill-icon svg { color: var(--pp-text-secondary); flex-shrink: 0; }
.pp-pill-icon svg.pp-star { color: var(--pp-orange); }
.pp-service-headline-price {
    margin-top: 12px;
    font-family: var(--pp-font-ui);
    font-weight: 700;
    font-size: 24px;
    color: var(--pp-text);
}

/* Section ----------------------------------------------------- */
.pp-section { margin-top: 28px; }
#packages { scroll-margin-top: 84px; }
.pp-head .pp-section { margin-top: 12px; }
.pp-section-title {
    font-family: var(--pp-font-ui);
    font-weight: 700;
    font-size: 22px;
    color: var(--pp-text);
    margin: 0 0 12px;
    letter-spacing: -0.2px;
}

/* Card -------------------------------------------------------- */
.pp-card {
    background: var(--pp-card);
    border: 1px solid var(--pp-border);
    border-radius: 14px;
    box-shadow: var(--pp-shadow-card);
}
.pp-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Provider strip --------------------------------------------- */
.pp-provider {
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.pp-provider-avatar {
    width: 56px; height: 56px;
    border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    color: white;
    font-family: var(--pp-font-ui);
    font-weight: 700;
    font-size: 22px;
    flex-shrink: 0;
    overflow: hidden;
}
.pp-provider-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* The avatar links to the provider's profile — same ring cue the directory
 * cards use, so a face means the same thing on every page. */
a.pp-provider-avatar {
    text-decoration: none;
    transition: box-shadow var(--pp-dur-fast) var(--pp-ease-out),
                transform var(--pp-dur-fast) var(--pp-ease-out);
}
a.pp-provider-avatar:hover {
    box-shadow: 0 0 0 3px var(--pp-primary);
    transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
    a.pp-provider-avatar { transition: none; }
    a.pp-provider-avatar:hover { transform: none; }
}
.pp-provider-meta { flex: 1; min-width: 0; }
.pp-provider-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--pp-neutral-ink);
    font-weight: 600;
    margin-bottom: 2px;
}
.pp-provider-name {
    font-family: var(--pp-font-ui);
    font-weight: 700;
    font-size: 18px;
    color: var(--pp-text);
}
.pp-provider-name-link { text-decoration: none; }
.pp-provider-name-link:hover { text-decoration: underline; }
/* Verification: one line, one mark, one colour. The shield and the verified
 * green mean a Pawprint ID check and nothing else; the soft variant covers a
 * provider with only signup mechanics (phone, email) on file.
 * --pp-verified-green is a FILL, ~2.2:1 as text — the -ink token (5.6:1) is
 * the text colour. */
.pp-verified-line {
    display: inline-flex;
    /* flex-start, not center: the statement wraps to two lines in a narrow
     * card, and a centred mark then floats between them. */
    align-items: flex-start;
    gap: 6px;
    margin-top: 7px;
    font-family: var(--pp-font-ui);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--pp-verified-green-ink);
}
.pp-verified-line svg { flex-shrink: 0; margin-top: 1px; }
.pp-verified-line-soft { color: var(--pp-neutral-ink); font-weight: 500; }

/* Bio (about) -------------------------------------------------- */
.pp-bio { padding: 16px 18px; }
.pp-bio p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--pp-text);
    white-space: pre-wrap;
}

/* Package row ------------------------------------------------- */
.pp-package {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.pp-package-body { flex: 1; min-width: 0; }
.pp-package-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--pp-text);
    line-height: 1.25;
}
.pp-package-sub {
    margin-top: 4px;
    font-size: 12px;
    color: var(--pp-neutral-ink);
    font-weight: 500;
}
.pp-package-desc {
    margin-top: 6px;
    font-size: 13px;
    color: var(--pp-neutral-ink);
    line-height: 1.45;
}
.pp-package-price {
    font-family: var(--pp-font-ui);
    font-weight: 700;
    font-size: 18px;
    color: var(--pp-text);
    white-space: nowrap;
}
a.pp-package {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform 140ms var(--pp-ease-out), box-shadow 140ms var(--pp-ease-out);
}
a.pp-package:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07); }
a.pp-package:active { transform: scale(0.985); }
.pp-package-chev {
    color: var(--pp-text-tertiary);
    flex-shrink: 0;
    margin-left: 2px;
}

/* Availability calendar --------------------------------------- */
/* The live block ships hidden and js/service-availability.js unhides it once
   a month of real data is in hand — so a failed fetch (or no JS at all)
   leaves the heading and the next-available line, never a dead grid. */
.pp-sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
}
.pp-avail[hidden], .pp-avail-live[hidden] { display: none; }
.pp-avail-lede {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--pp-text);
}
.pp-avail-lede time { font-weight: 700; }

/* Package selector (duplicated chip styles — same look as the directory's
   .pp-chip; each SSR function carries its own CSS by design) ------------- */
.pp-avail-pkgs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
/* One package is not a choice — the row is rendered (the script reads the id
   off it) but never shown. */
.pp-avail-pkgs[hidden] { display: none; }
.pp-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    max-width: 100%;
    min-width: 0;
    padding: 8px 14px;
    border: 1px solid var(--pp-border);
    border-radius: 999px;
    background: var(--pp-card);
    color: var(--pp-neutral-ink);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}
.pp-chip:hover { color: var(--pp-text); border-color: var(--pp-text-tertiary); }
.pp-chip-sel {
    background: var(--pp-primary);
    border-color: var(--pp-primary);
    color: var(--pp-text);
}
.pp-avail-pkg-name { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pp-avail-pkg-meta { font-size: 12px; font-weight: 600; color: var(--pp-neutral-ink); flex-shrink: 0; }
.pp-chip-sel .pp-avail-pkg-meta { color: var(--pp-text); }

/* Month grid --------------------------------------------------- */
.pp-cal-card { padding: 12px 12px 12px; }
.pp-cal-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0 10px;
}
.pp-cal-month {
    flex: 1;
    text-align: center;
    font-family: var(--pp-font-ui);
    font-weight: 700;
    font-size: 16px;
    color: var(--pp-text);
}
.pp-cal-nav {
    width: 38px; height: 38px;
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--pp-border);
    border-radius: 999px;
    background: var(--pp-card);
    color: var(--pp-text);
    font: inherit;
    cursor: pointer;
}
.pp-cal-nav:disabled { opacity: 0.35; cursor: default; }
.pp-cal-scroll { transition: opacity var(--pp-dur-fast) var(--pp-ease-out); }
.pp-cal-scroll[aria-busy="true"] { opacity: 0.45; }
.pp-cal {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 3px;
    table-layout: fixed;
}
.pp-cal thead th {
    padding: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pp-neutral-ink);
}
.pp-cal thead abbr { text-decoration: none; }
.pp-cal td { padding: 0; }
.pp-cal-day-btn {
    width: 100%;
    height: 46px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    font-family: inherit;
    color: var(--pp-text-tertiary);
    cursor: default;
}
.pp-cal-dnum { font-size: 14px; font-weight: 600; line-height: 1; }
.pp-cal-dtag { font-size: 9.5px; font-weight: 700; line-height: 1; }
/* State is never carried by colour alone: open days say "Open", full days
   say "Full", past days are struck through, and the legend below the grid
   names all three. */
.pp-cal-day-btn.is-open {
    background: var(--pp-primary);
    border-color: var(--pp-primary);
    color: var(--pp-text);
    cursor: pointer;
    transition: box-shadow var(--pp-dur-fast) var(--pp-ease-out);
}
.pp-cal-day-btn.is-open:hover { box-shadow: var(--pp-shadow-hover); }
.pp-cal-day-btn.is-full {
    background: var(--pp-card);
    border-color: var(--pp-border);
    color: var(--pp-neutral-ink);
}
.pp-cal-day-btn.is-past .pp-cal-dnum { text-decoration: line-through; }
.pp-cal-day-btn.is-sel { box-shadow: inset 0 0 0 2px var(--pp-text); }
.pp-cal-day-btn:focus-visible,
.pp-cal-nav:focus-visible,
.pp-chip:focus-visible,
.pp-cal-time:focus-visible,
.pp-cal-more:focus-visible,
.pp-cal-retry:focus-visible {
    outline: 2px solid var(--pp-text);
    outline-offset: 2px;
}
.pp-cal-legend {
    list-style: none;
    margin: 12px auto 0;
    padding: 0;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--pp-neutral-ink);
}
.pp-cal-legend li { display: flex; align-items: center; gap: 8px; }
.pp-cal-key {
    flex: 0 0 auto;
    min-width: 32px; height: 22px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid transparent;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 700;
}
.pp-cal-key-open { background: var(--pp-primary); color: var(--pp-text); }
.pp-cal-key-full { background: var(--pp-card); border-color: var(--pp-border); color: var(--pp-neutral-ink); }
.pp-cal-key-closed { color: var(--pp-text-tertiary); }

/* Selected day + start times ----------------------------------- */
.pp-cal-panel { margin-top: 14px; }
.pp-cal-hint { margin: 0; font-size: 13px; color: var(--pp-neutral-ink); }
.pp-cal-day-title {
    font-family: var(--pp-font-ui);
    font-weight: 700;
    font-size: 17px;
    color: var(--pp-text);
    margin: 0 0 2px;
}
.pp-cal-day-sub {
    margin: 0 0 10px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--pp-neutral-ink);
}
/* Start times are a radio group (js/service-availability.js renders it):
   the picked one fills brand yellow with a dark ring, so the state is not
   carried by colour alone. */
.pp-cal-times {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.pp-cal-time {
    padding: 7px 11px;
    border: 1px solid var(--pp-border);
    border-radius: 999px;
    background: var(--pp-card);
    color: var(--pp-text);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.pp-cal-time:hover { border-color: var(--pp-text-tertiary); }
.pp-cal-time.is-sel {
    background: var(--pp-primary);
    border-color: var(--pp-text);
    box-shadow: inset 0 0 0 1px var(--pp-text);
}
.pp-cal-more {
    display: none;
    margin-top: 10px;
    padding: 8px 14px;
    border: 1px solid var(--pp-border);
    border-radius: 999px;
    background: var(--pp-card);
    color: var(--pp-text);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
/* Phones only: keep Continue near the day just picked. */
@media (max-width: 640px) {
    .pp-cal-times.is-collapsed .pp-cal-time[data-extra] { display: none; }
    .pp-cal-times.is-collapsed + .pp-cal-more { display: inline-flex; }
}
.pp-cal-book { margin-top: 14px; }
.pp-cal-book[hidden] { display: none; }
.pp-cal-errcell { padding: 20px 8px; text-align: center; }
.pp-cal-err { margin: 0; font-size: 13px; color: var(--pp-neutral-ink); }
.pp-cal-retry {
    margin-top: 8px;
    padding: 7px 14px;
    border: 1px solid var(--pp-border);
    border-radius: 999px;
    background: var(--pp-card);
    color: var(--pp-text);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.pp-cal-note {
    margin: 14px 2px 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--pp-neutral-ink);
}
@media (prefers-reduced-motion: reduce) {
    .pp-cal-scroll, .pp-cal-day-btn.is-open { transition: none; }
}

/* Reviews ----------------------------------------------------- */
.pp-review { padding: 16px 18px; }
.pp-review-head {
    display: flex;
    align-items: center;
    gap: 12px;
}
.pp-review-avatar {
    width: 40px; height: 40px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: var(--pp-font-ui);
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
    overflow: hidden;
}
.pp-review-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pp-review-head-meta { flex: 1; min-width: 0; }
.pp-review-author {
    font-size: 14px;
    font-weight: 600;
    color: var(--pp-text);
}
.pp-review-stars {
    margin-top: 2px;
    font-size: 13px;
    color: var(--pp-orange);
    letter-spacing: 1px;
    line-height: 1;
}
.pp-review-stars-empty { color: var(--pp-text-tertiary); }
.pp-review-text {
    margin: 12px 0 10px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--pp-text);
}
.pp-review-foot {
    font-size: 12px;
    color: var(--pp-neutral-ink);
    font-weight: 500;
}

/* CTA block --------------------------------------------------- */
.pp-cta {
    margin-top: 40px;
    padding: 28px 24px;
    border-radius: 22px;
    background: var(--pp-primary);
    position: relative;
    overflow: hidden;
}
.pp-cta-paws {
    position: absolute;
    right: -40px; top: -30px;
    color: var(--pp-text);
    opacity: 0.14;
    pointer-events: none;
}
.pp-cta h2 {
    font-family: var(--pp-font-ui);
    font-weight: 700;
    font-size: 26px;
    color: var(--pp-text);
    margin: 0 0 6px;
    letter-spacing: -0.3px;
    position: relative;
}
.pp-cta p {
    font-size: 15px;
    color: var(--pp-text);
    opacity: 0.78;
    margin: 0 0 18px;
    line-height: 1.5;
    position: relative;
    max-width: 480px;
}
.pp-cta-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    position: relative;
}
.pp-btn-primary {
    background: var(--pp-text);
    color: var(--pp-text-on-dark);
    border: none;
    border-radius: 14px;
    padding: 13px 20px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    transition: transform 180ms var(--pp-ease-out);
}
.pp-btn-secondary {
    background: var(--pp-card);
    color: var(--pp-text);
    border: 1px solid var(--pp-border);
    border-radius: 14px;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    transition: transform 180ms var(--pp-ease-out);
}
.pp-btn-primary:active, .pp-btn-secondary:active, .pp-nav-cta:active { transform: scale(0.97); }

/* Booking rail --------------------------------------------------- *
 * One grid, two arrangements. Narrow: head, then the booking card, then the
 * content — so price and CTA are above the fold on a share-link landing.
 * Wide: the card moves into a second column and sticks. The content column
 * stays at its original ~712px so no existing section's line length changes. */
.pp-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 40px;
}
.pp-head, .pp-col, .pp-rail, .pp-cta-wrap { min-width: 0; }
.pp-rail { margin-top: 16px; }
@media (max-width: 640px) {
    .pp-service-hero-photo:not(.pp-service-hero-photo-fallback) { height: 140px; aspect-ratio: auto; }
    .pp-service-hero-photo-fallback { height: 24px; }
    .pp-provider { padding: 12px; gap: 10px; }
    .pp-provider-avatar { width: 44px; height: 44px; }
}

@media (min-width: 1100px) {
    .pp-wrap.pp-layout { max-width: 1120px; }
    .pp-layout {
        grid-template-columns: minmax(0, 1fr) 328px;
        align-items: start;
    }
    .pp-head { grid-column: 1; grid-row: 1; }
    /* Spans both content rows AND stretches. The card is what sticks, not the
     * column — and align-items:start would size this column to the card,
     * leaving it no room to travel. It stops at row 3 on purpose, so the card
     * hands off to the CTA section rather than floating beside it. */
    .pp-rail {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: stretch;
        margin-top: 30px;
    }
    .pp-col { grid-column: 1; grid-row: 2; }
    /* Column 1, not the full width: a 1120px CTA band beside a 712px content
     * column reads as a different page. */
    .pp-cta-wrap { grid-column: 1; grid-row: 3; }
    .pp-book { position: sticky; top: 84px; }
}

.pp-book { padding: 20px; }
.pp-book-price {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.pp-book-sub { font-size: 13px; line-height: 1.5; color: var(--pp-neutral-ink); margin-top: 4px; overflow-wrap: anywhere; }
.pp-book-trust { font-size: 13px; color: var(--pp-neutral-ink); margin: 10px 0 0; }
.pp-book-options {
    display: flex; align-items: center; justify-content: center;
    min-height: 44px; font-size: 13px; color: var(--pp-neutral-ink);
    text-underline-offset: 3px;
}
.pp-book-facts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 0;
    padding-top: 10px;
    border-top: 1px solid var(--pp-border);
}
.pp-book-fact {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    color: var(--pp-text);
}
.pp-book-fact svg { color: var(--pp-text-secondary); flex-shrink: 0; }
.pp-book-fact .pp-star, .pp-book-fact svg.pp-star { color: var(--pp-orange); }
.pp-book-cta {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 16px;
}
.pp-book-alt {
    display: block;
    text-align: center;
    margin-top: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--pp-neutral-ink);
    text-decoration: none;
}
.pp-book-alt:hover { color: var(--pp-text); text-decoration: underline; }
/* The welcome offer, when GET /platform-config says there is one. Reading
 * text on a green tint: --pp-text, pinned by contracts/contrast-contract. */
.pp-book-offer {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 14px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(77, 191, 115, 0.12);
    font-size: 13px;
    line-height: 1.45;
    color: var(--pp-text);
}
.pp-book-offer svg { flex-shrink: 0; margin-top: 2px; color: var(--pp-verified-green-ink); }
.pp-book-offer a { color: var(--pp-text); font-weight: 600; text-underline-offset: 2px; white-space: nowrap; }
.pp-book-note {
    margin: 14px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--pp-neutral-ink);
    text-align: center;
}
.pp-book-requirement { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--pp-neutral-ink); text-align: center; }
.pp-reviews-empty { padding: 16px 18px; margin: 0; font-size: 14px; line-height: 1.5; color: var(--pp-neutral-ink); }

/* Pinned bar: narrow screens only, and only once the card has scrolled away.
 * Ships hidden and stays hidden without JS — see js/sticky-cta.js. */
.pp-bookbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    background: rgba(253, 252, 250, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--pp-border);
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(100%);
    transition: transform var(--pp-dur-base) var(--pp-ease-out);
}
.pp-bookbar[hidden] { display: none; }
.pp-bookbar.is-up { transform: translateY(0); }
.pp-bookbar-inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 11px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.pp-bookbar-price { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.pp-bookbar .pp-btn-primary { padding: 11px 18px; font-size: 14.5px; }
@media (min-width: 1100px) { .pp-bookbar { display: none; } }
@media (prefers-reduced-motion: reduce) {
    .pp-bookbar { transition: none; }
}

/* Footer ------------------------------------------------------ */
.pp-footer {
    margin-top: 80px;
    background: var(--pp-text);
    color: rgba(253,252,250,0.72);
}
.pp-footer-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 48px 24px 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    justify-content: space-between;
    align-items: flex-start;
}
.pp-footer-brand {
    display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.pp-footer p { font-size: 13px; line-height: 1.55; margin: 0; max-width: 280px; }
.pp-footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
.pp-footer-links a { font-size: 14px; color: inherit; text-decoration: none; }
.pp-footer-links a:hover { color: rgba(253,252,250,0.95); }
.pp-footer-contact { font-size: 13px; line-height: 1.7; }
.pp-footer-contact a { display: inline-block; min-height: 24px; color: inherit; text-decoration: none; }
.pp-footer-contact a:hover { color: rgba(253,252,250,0.95); }
.pp-footer-bottom {
    max-width: 1180px;
    margin: 28px auto 0;
    padding: 20px 24px 24px;
    border-top: 1px solid rgba(253,252,250,0.12);
    display: flex; justify-content: space-between;
    flex-wrap: wrap; gap: 8px;
    font-size: 12px;
}

/* Avatar gradient helpers ------------------------------------ */
.grad-orange { background: var(--pp-grad-orange); }
.grad-cream  { background: var(--pp-grad-cream); }
.grad-amber  { background: var(--pp-grad-amber); }
.grad-pink   { background: var(--pp-grad-pink); }
.grad-teal   { background: var(--pp-grad-teal); }
.grad-green  { background: var(--pp-grad-green); }

/* Fallback / error page -------------------------------------- */
.pp-error {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 40px;
    padding-bottom: 40px;
}
.pp-error-card {
    background: var(--pp-card);
    border: 1px solid var(--pp-border);
    border-radius: 22px;
    box-shadow: var(--pp-shadow-card);
    padding: 36px 28px;
    text-align: center;
    max-width: 440px;
    width: 100%;
}
.pp-error-card img { display: inline-block; margin-bottom: 18px; border-radius: 16px; }
.pp-error-card h1 {
    font-family: var(--pp-font-display);
    font-weight: 700;
    font-size: 22px;
    color: var(--pp-text);
    margin: 0 0 8px;
    letter-spacing: -0.3px;
}
.pp-error-card p {
    font-size: 15px;
    color: var(--pp-neutral-ink);
    margin: 0 0 22px;
    line-height: 1.5;
}
.pp-error-card .pp-btn-primary { background: var(--pp-primary); color: var(--pp-text); }

/* --- Share row -------------------------------------------------------------
   js/share-row.js fills the empty [data-pp-share] host; nothing here renders
   until it does, so a no-JS visitor sees no card rather than dead controls.
   🔴 The form's own [hidden] rule is spelled out because an author-level
   display outranks the UA sheet's [hidden] — the same trap .pp-cards and
   .pp-dir-grid hit in api/directory.js. */
.pp-share {
    background: var(--pp-card);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-r-xl);
    box-shadow: var(--pp-shadow-card);
    padding: 20px 22px;
    margin: 0 0 18px;
}
.pp-share:empty { display: none; }
.pp-share-title {
    font-family: var(--pp-font-display);
    font-weight: 700;
    font-size: 18px;
    color: var(--pp-text);
    margin: 0 0 4px;
    letter-spacing: -0.2px;
}
.pp-share-sub {
    font-size: 14px;
    color: var(--pp-neutral-ink);
    margin: 0 0 14px;
    line-height: 1.45;
}
.pp-share-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pp-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--pp-r-pill);
    border: 1px solid var(--pp-border);
    background: var(--pp-bg);
    color: var(--pp-text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    /* 44px floor: this row is a phone-first surface. */
    min-height: 44px;
}
.pp-share-btn:hover { border-color: var(--pp-text-tertiary); }
.pp-share-fb { color: #1763c0; }
.pp-share-sms {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.pp-share-sms[hidden] { display: none; }
.pp-share-input {
    flex: 1 1 200px;
    min-width: 0;
    padding: 11px 14px;
    border-radius: var(--pp-r-md);
    border: 1px solid var(--pp-border);
    background: var(--pp-bg);
    color: var(--pp-text);
    font-family: inherit;
    font-size: 15px;
}
.pp-share-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}
.pp-share-submit {
    padding: 11px 20px;
    border-radius: var(--pp-r-md);
    border: 0;
    background: var(--pp-primary);
    color: var(--pp-text);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    min-height: 44px;
}
.pp-share-submit:disabled { opacity: 0.6; cursor: default; }
.pp-share-note {
    font-size: 13px;
    color: var(--pp-neutral-ink);
    margin: 10px 0 0;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.pp-share-note:empty { margin: 0; }
.pp-share-note.is-error { color: #b3261e; }

/* New-provider trust facts; Good to know mirrors /u/. */
.pp-provider-fact { margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--pp-neutral-ink); }
.pp-provider-fact-note { font-size: 12px; }
.pp-gtk { padding: 4px 16px; }
.pp-gtk-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; font-size: 14.5px; border-bottom: 1px solid var(--pp-border); }
.pp-gtk-row:last-child { border-bottom: 0; }
.pp-gtk-icon { width: 30px; height: 30px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--pp-bg); color: var(--pp-text-secondary); flex-shrink: 0; }