/* ==========================================================================
   HostRyze — home page additions (index.html only).
   Everything here fills small gaps in css/styles.css and css/pages.css for the
   home page; it never redefines a shared component. Variants are opt-in
   modifier classes (.clients--flow). Anything two pages need lives in
   css/pages.css (.promises, .clients__small, .faq > header .lede), not here.
   Same two surfaces, same tokens, same breakpoints (1180 / 900 / 640).
   ========================================================================== */

/* ---------- Results head: lede under the h2 in the narrow column ---------- */
.cases__head .lede { margin-top: 16px; font-size: 1rem; }

/* ---------- Video cards: captions use the shared <blockquote> (name only, no invented quotes) ---------- */
.vcard video[poster] { background: var(--green); }

/* ---------- System: one-line tie-in to the Tenant Acquisition page ---------- */
.after--tie { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px clamp(16px, 2vw, 28px); text-align: center; }
.after--tie p { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; color: rgba(var(--fgc), 0.82); }

/* ---------- Showcase: client wall ----------
   The shared .clients (styles.css) is a fixed 10-column grid. The home wall carries an
   11th logo (Pineapple Paradise, per content/home.md), so it opts into a wrapping,
   centred variant. The base .clients rule is left untouched for the other pages. */
.clients--flow { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap) clamp(24px, 3vw, 44px); }
.clients--flow li { flex: 0 1 clamp(84px, 8.6vw, 116px); display: grid; place-items: center; }

/* ---------- Steps: the HostRyze steps carry a full sentence or two ---------- */
.steps .step p { max-width: 34ch; }

/* ---------- Guarantee: .promises itself is in css/pages.css; the list already ends on a rule,
   so the closing line needs none of its own ---------- */
.guarantee .promises + .guarantee__line { border-top: 0; padding-top: 0; }

/* ---------- Integrations: Simple Icons glyphs are square, keep them on the logo baseline ---------- */
.pms img[src$=".svg"][width="38"] { height: 34px; width: 34px; }

/* ---------- What you get: photographs crop from the centre, not the top-left corner ---------- */
.get .shot img { object-position: center; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .clients--flow li { flex-basis: clamp(76px, 11vw, 104px); }
}
@media (max-width: 640px) {
  .cases__head .lede { display: none; }
  .clients--flow { gap: 20px 18px; }
  .clients--flow li { flex-basis: calc(33.333% - 12px); }
}