/* ==========================================================================
   CONTENT PAGES — case studies, about, changelog, roadmap, compare,
   free tools and the three solutions pages. One sheet, because these nine
   pages are the same handful of shapes in a different order: a centred hero,
   a card index, a table, a timeline and a stat strip. Everything here is
   built on the .zr-pp__* primitives so a content page and a platform page
   read as the same site.
   ========================================================================== */

/* ── centred hero ─────────────────────────────────────────────────────────
   The platform pages lead with a product shot beside the copy. These lead
   with the copy alone, so the grid collapses to one centred column. */
.zr-pp__hero--center{ padding-bottom:clamp(40px,4vw,64px); }
.zr-pp__hero--center .zr-pp__hero-grid{ grid-template-columns:minmax(0,1fr); }
.zr-pp__hero--center .zr-pp__copy{ align-items:center; text-align:center; width:min(820px,100%); margin:0 auto; }
.zr-pp__hero--center .zr-pp__lede{ max-width:660px; }
.zr-pp__hero--center .zr-pp__cta{ justify-content:center; }
.zr-pp__hero--center .zr-pp__h1{ font-size:clamp(34px,4.6vw,54px); }

/* a strip of numbers under a hero or inside a card */
.zr-nums{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(20px,4vw,56px); margin-top:8px; }
.zr-nums div{ text-align:center; }
.zr-nums b{ display:block; font-size:clamp(26px,3vw,38px); font-weight:500; letter-spacing:-.03em; line-height:1.1; color:var(--pp-ink); font-variant-numeric:tabular-nums; }
.zr-nums span{ display:block; margin-top:4px; font-size:13.5px; color:var(--pp-dim); }

/* ── a card index (case studies, tools, comparisons, blog-ish rows) ────── */
.zr-idx{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
.zr-idx--2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.zr-card2{
  display:flex; flex-direction:column; min-width:0; overflow:hidden;
  background:#fff; border:1px solid #EDF1F7; border-radius:18px;
  box-shadow:0 6px 16px -6px rgba(31,36,41,.05);
  text-decoration:none; transition:border-color .18s var(--zr-ease-out-quad), box-shadow .18s var(--zr-ease-out-quad);
}
a.zr-card2:hover{ border-color:#C9D6F2; box-shadow:0 16px 34px -16px rgba(16,49,110,.22); }
.zr-card2__top{
  position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:18px;
  min-height:158px; padding:20px 22px; color:#fff; overflow:hidden;
  background:var(--bg, linear-gradient(135deg,#1463F5,#0091FF));
}
.zr-card2__top::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.35;
  background-image:radial-gradient(rgba(255,255,255,.16) .6px, transparent .9px); background-size:3px 3px;
}
.zr-card2__num{ font-size:clamp(30px,3.4vw,42px); font-weight:500; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; }
.zr-card2__lab{ font-size:14.5px; line-height:20px; color:rgba(255,255,255,.88); max-width:200px; }
.zr-card2__brand{ display:flex; align-items:center; gap:8px; height:26px; }
.zr-card2__brand svg{ height:22px; width:auto; }
.zr-card2__body{ display:flex; flex-direction:column; gap:10px; padding:20px 22px 22px; flex:1 1 auto; }
.zr-card2__body h3{ margin:0; font-size:18px; font-weight:500; line-height:1.3; letter-spacing:-.018em; color:var(--pp-ink); text-wrap:pretty; }
.zr-card2__body p{ margin:0; font-size:14.5px; line-height:22px; color:var(--pp-dim); text-wrap:pretty; }
.zr-card2__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:auto; padding-top:6px; }
.zr-card2__go{ display:inline-flex; align-items:center; gap:6px; margin-top:auto; padding-top:8px; font-size:14px; font-weight:500; color:var(--zr-blue); }
.zr-card2__go svg{ width:16px; height:16px; transition:translate .2s var(--zr-ease); }
a.zr-card2:hover .zr-card2__go svg{ translate:4px 0; }

/* ── a feature/step list with an icon per row ─────────────────────────── */
.zr-rowlist{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px 26px; }
.zr-rowlist--1{ grid-template-columns:minmax(0,1fr); }
.zr-rowlist--3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.zr-rowlist li{ display:flex; gap:14px; }
.zr-rowlist i{ display:grid; place-items:center; width:34px; height:34px; flex:0 0 auto; border-radius:10px; background:var(--bg,#E8F0FE); color:var(--fg,var(--zr-blue)); }
.zr-rowlist i svg{ width:17px; height:17px; }
.zr-rowlist b{ display:block; font-size:15.5px; font-weight:500; color:var(--pp-ink); }
.zr-rowlist p{ margin:4px 0 0; font-size:14.5px; line-height:22px; color:var(--pp-dim); text-wrap:pretty; }

/* ── the comparison table ─────────────────────────────────────────────── */
.zr-cmp{ overflow:hidden; }
.zr-cmp__scroll{ overflow-x:auto; }
.zr-cmp table{ width:100%; min-width:720px; border-collapse:collapse; }
.zr-cmp th, .zr-cmp td{ padding:14px 18px; text-align:left; border-bottom:1px solid #F2F5F9; font-size:14px; color:var(--pp-body); vertical-align:middle; }
.zr-cmp thead th{
  background:#FAFBFC; border-bottom:1px solid #EEF1F5; white-space:nowrap;
  font-size:13px; font-weight:500; color:var(--pp-ink);
}
.zr-cmp thead th:first-child{ font-family:var(--pp-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#9AA1AC; }
.zr-cmp thead th.is-us{ background:#F2F7FF; color:var(--zr-blue); }
.zr-cmp tbody td.is-us{ background:#F8FBFF; color:var(--pp-ink); font-weight:500; }
.zr-cmp tbody tr:last-child td{ border-bottom:0; }
.zr-cmp td:first-child{ font-weight:500; color:var(--pp-ink); }
.zr-cmp td small{ display:block; margin-top:3px; font-size:12.5px; font-weight:400; color:var(--pp-dim); }
.zr-tick, .zr-cross, .zr-part{ display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; flex:0 0 auto; }
.zr-tick { background:#E4F7EC; color:#0F7A45; }
.zr-cross{ background:#F1F3F6; color:#9AA1AC; }
.zr-part { background:#FFF3E0; color:#9A5B00; }
.zr-tick svg, .zr-cross svg, .zr-part svg{ width:11px; height:11px; }
.zr-cmp__note{ padding:14px 18px; border-top:1px solid #EEF1F5; background:#FAFBFC; font-size:13px; line-height:20px; color:var(--pp-dim); }

/* two columns of plain claims, the honest "where they win" half */
.zr-honest{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.zr-honest__card{ padding:26px 24px; }
.zr-honest__card h3{ display:flex; align-items:center; gap:10px; margin:0 0 14px; font-size:19px; font-weight:500; color:var(--pp-ink); }
.zr-honest__card ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.zr-honest__card li{ display:flex; gap:10px; font-size:14.5px; line-height:22px; color:var(--pp-body); }
.zr-honest__card li::before{ content:""; width:6px; height:6px; margin-top:8px; border-radius:50%; flex:0 0 auto; background:var(--dot,#C3C8CF); }
.zr-honest__card--us li{ --dot:#1463F5; }
.zr-honest__card--them li{ --dot:#C3C8CF; }

/* ── the changelog timeline ───────────────────────────────────────────── */
.zr-cl{ display:flex; flex-direction:column; gap:0; }
.zr-cl__filters{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:clamp(28px,3vw,44px); }
.zr-cl__filters button{
  padding:7px 15px; border:1px solid var(--pp-hair); border-radius:999px; background:#fff;
  font:inherit; font-size:13.5px; color:var(--pp-body); cursor:pointer;
  transition:border-color .16s, background .16s, color .16s;
}
.zr-cl__filters button:hover{ border-color:#C9D6F2; }
.zr-cl__filters button[aria-pressed="true"]{ background:var(--zr-blue); border-color:var(--zr-blue); color:#fff; }
.zr-cl__entry{
  display:grid; grid-template-columns:170px minmax(0,1fr); gap:clamp(16px,3vw,40px);
  padding:clamp(26px,3vw,40px) 0; border-top:1px solid #EEF1F5;
}
.zr-cl__entry:first-child{ border-top:0; padding-top:0; }
/* `display:grid` on a class outranks the UA's `[hidden]{display:none}`, so the
   filter below would have hidden nothing. Restate it. */
.zr-cl__entry[hidden]{ display:none; }
.zr-cl__when{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.zr-cl__date{ font-family:var(--pp-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#9AA1AC; }
.zr-cl__what h3{ margin:0 0 12px; font-size:clamp(20px,2.1vw,25px); font-weight:500; line-height:1.3; letter-spacing:-.022em; color:var(--pp-ink); text-wrap:pretty; }
.zr-cl__what p{ margin:0 0 12px; font-size:15px; line-height:25px; color:var(--pp-body); text-wrap:pretty; }
.zr-cl__what ul{ margin:0 0 12px; padding-left:20px; display:flex; flex-direction:column; gap:8px; }
.zr-cl__what li{ font-size:14.5px; line-height:23px; color:var(--pp-body); }
.zr-cl__what li b, .zr-cl__what p b{ font-weight:500; color:var(--pp-ink); }
.zr-cl__what code{ font-family:var(--pp-mono); font-size:13px; padding:1px 5px; border-radius:5px; background:#F1F3F6; color:var(--pp-body); }
.zr-cl__what > :last-child{ margin-bottom:0; }
.zr-cl__count{ margin:0 0 20px; text-align:center; font-size:13.5px; color:var(--pp-dim); }

/* ── the roadmap board ────────────────────────────────────────────────── */
.zr-rm{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; align-items:start; }
.zr-rm__col{ display:flex; flex-direction:column; gap:10px; padding:12px; border-radius:20px; background:#F6F7F9; border:1px solid #EEF1F5; }
.zr-rm__head{ display:flex; align-items:center; gap:10px; padding:6px 8px 2px; }
.zr-rm__head b{ font-size:15px; font-weight:500; color:var(--pp-ink); }
.zr-rm__head i{ width:8px; height:8px; border-radius:50%; background:var(--c,#C3C8CF); flex:0 0 auto; }
.zr-rm__head span{ margin-left:auto; font-family:var(--pp-mono); font-size:12px; color:#9AA1AC; }
.zr-rm__item{ display:flex; gap:12px; padding:16px; background:#fff; border:1px solid #EDF1F7; border-radius:14px; }
.zr-rm__vote{
  display:flex; flex-direction:column; align-items:center; gap:2px; flex:0 0 auto;
  width:42px; padding:6px 0; border:1px solid var(--pp-hair); border-radius:10px;
  background:#fff; font:inherit; cursor:pointer;
  transition:border-color .16s, background .16s, color .16s;
}
.zr-rm__vote svg{ width:12px; height:12px; color:#9AA1AC; transition:color .16s, translate .16s; }
.zr-rm__vote b{ font-size:13px; font-weight:600; color:var(--pp-ink); font-variant-numeric:tabular-nums; }
.zr-rm__vote:hover{ border-color:#C9D6F2; background:#F8FBFF; }
.zr-rm__vote:hover svg{ color:var(--zr-blue); translate:0 -1px; }
.zr-rm__vote[aria-pressed="true"]{ border-color:var(--zr-blue); background:#EFF5FF; }
.zr-rm__vote[aria-pressed="true"] svg{ color:var(--zr-blue); }
.zr-rm__vote[aria-pressed="true"] b{ color:var(--zr-blue); }
.zr-rm__t b{ display:block; font-size:15px; font-weight:500; line-height:1.35; color:var(--pp-ink); }
.zr-rm__t p{ margin:6px 0 0; font-size:13.5px; line-height:20px; color:var(--pp-dim); text-wrap:pretty; }
.zr-rm__t .zr-chip{ margin-top:10px; }

/* ── free tools ───────────────────────────────────────────────────────── */
.zr-tools3{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
.zr-tool{
  display:flex; flex-direction:column; gap:10px; padding:24px 22px 22px;
  background:#fff; border:1px solid #EDF1F7; border-radius:18px; text-decoration:none;
  box-shadow:0 6px 16px -6px rgba(31,36,41,.05);
  transition:border-color .18s var(--zr-ease-out-quad), box-shadow .18s var(--zr-ease-out-quad);
}
a.zr-tool:hover{ border-color:#C9D6F2; box-shadow:0 16px 34px -16px rgba(16,49,110,.22); }
.zr-tool__ico{ display:grid; place-items:center; width:40px; height:40px; margin-bottom:4px; border-radius:12px; background:var(--bg,#E8F0FE); color:var(--fg,var(--zr-blue)); }
.zr-tool__ico svg{ width:20px; height:20px; }
.zr-tool b{ font-size:17px; font-weight:500; line-height:1.3; color:var(--pp-ink); }
.zr-tool p{ margin:0; font-size:14px; line-height:22px; color:var(--pp-dim); text-wrap:pretty; flex:1 1 auto; }
.zr-tool__foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px; }
.zr-tool__go{ display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:500; color:var(--zr-blue); }
.zr-tool__go svg{ width:16px; height:16px; transition:translate .2s var(--zr-ease); }
a.zr-tool:hover .zr-tool__go svg{ translate:4px 0; }

/* ── about: values, team, story ───────────────────────────────────────── */
.zr-vals{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
/* three per row is right for the three-value pages, but about.html has four,
   and three-plus-one left a card alone against half a frame of empty grey.
   Four values get their own row; nothing else on the site is affected. */
.zr-vals:has(> :nth-child(4)):not(:has(> :nth-child(5))){ grid-template-columns:repeat(4, minmax(0,1fr)); }
.zr-val{ padding:26px 24px 28px; }
.zr-val b{ display:block; margin-bottom:8px; font-size:19px; font-weight:500; line-height:1.3; color:var(--pp-ink); }
.zr-val p{ margin:0; font-size:14.5px; line-height:23px; color:var(--pp-dim); text-wrap:pretty; }
.zr-val__n{ display:block; margin-bottom:14px; font-family:var(--pp-mono); font-size:11px; letter-spacing:.1em; color:var(--zr-blue); }
.zr-story{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:start; }
.zr-story p{ margin:0 0 16px; font-size:16px; line-height:27px; color:var(--pp-body); text-wrap:pretty; }
.zr-story p:last-child{ margin-bottom:0; }
.zr-story p b{ font-weight:500; color:var(--pp-ink); }
.zr-people{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
.zr-person{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:22px 16px; text-align:center; }
/* real photographs now, off zerorank.ai/team — square crops, so object-fit
   only matters while one is still loading */
.zr-person__av{ width:72px; height:72px; border-radius:18px; object-fit:cover; background:linear-gradient(140deg,#DCE6F7,#B9CDEE); }
.zr-person b{ font-size:15.5px; font-weight:500; color:var(--pp-ink); }
.zr-person span{ font-size:13px; color:var(--zr-blue); }
.zr-person p{ margin:4px 0 0; font-size:13px; line-height:19px; color:var(--pp-dim); text-wrap:pretty; }

/* ── about: the proof block beside the story ─────────────────────────────
   Frame, then cards, exactly like .zr-vals and .zr-people further down the
   page. The numbers take the full width; the four claims sit two-up under
   them, one line of copy each. */
.zr-proof{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.zr-proof__nums{ grid-column:1 / -1; padding:22px 24px 24px; }
.zr-proof__k{
  margin:0 0 14px; font-family:var(--pp-mono); font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase; color:#9AA1AC;
}
.zr-proof__nums .zr-nums{ justify-content:flex-start; gap:clamp(18px,2.6vw,30px); margin:0; }
.zr-proof__nums .zr-nums > div{ text-align:left; }
.zr-proof__it{ padding:20px 20px 22px; }
.zr-proof__it i{
  display:grid; place-items:center; width:32px; height:32px; margin-bottom:12px;
  border-radius:10px; background:var(--bg,#E8F0FE); color:var(--fg,var(--zr-blue));
}
.zr-proof__it i svg{ width:16px; height:16px; }
.zr-proof__it b{ display:block; margin-bottom:6px; font-size:15px; font-weight:500; line-height:1.35; color:var(--pp-ink); }
.zr-proof__it p{ margin:0; font-size:13.5px; line-height:21px; color:var(--pp-dim); text-wrap:pretty; }

/* ── solutions: the audience pages ──────────────────────────────────────
   The three cards used to be identical white boxes inside a grey frame: a
   22px red "?" chip, the question in body type, a 22px green tick, the
   answer in the caption grey. Both chips were carrying the whole structure
   at a size you had to look for, and the answer read as less important
   than the problem. Now the question is stated at the size it is actually
   asked at, with the room it is asked in underneath, and the answer sits
   below on its own tint — so the card shows the gap before it fills it. */
.zr-pain{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
.zr-ask{
  display:flex; flex-direction:column;
  padding:26px 24px 24px; border-radius:20px;
  border:1px solid var(--pp-hair); background:#fff;
  box-shadow:0 1px 2px rgba(23,33,54,.04);
}
.zr-ask__n{ font-family:var(--pp-mono); font-size:11.5px; letter-spacing:.06em; color:var(--zr-blue); }
.zr-ask__q{
  margin:12px 0 0; font-size:19px; font-weight:500; line-height:1.32;
  letter-spacing:-.018em; color:var(--pp-ink); text-wrap:balance;
}
.zr-ask__who{ margin:9px 0 18px; font-size:12.5px; line-height:18px; color:var(--pp-dim); }
/* margin-top:auto so the answer blocks line up across the row however long
   the questions above them run */
.zr-ask__a{ margin-top:auto; padding:16px; border-radius:14px; background:#F6F8FC; }
.zr-ask__lab{
  display:flex; align-items:center; gap:7px; margin-bottom:9px;
  font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:#0F7A45;
}
.zr-ask__lab svg{ width:13px; height:13px; flex:0 0 auto; }
.zr-ask__a p{ margin:0; font-size:14px; line-height:21px; color:var(--pp-body); }

/* ── solutions: the product, beside the claim ────────────────────────────
   The audience pages argued entirely in prose and rows — a visitor could
   reach the case studies without once seeing the thing. Copy left, the
   dashboard screenshot right, at the end of the page where the audience
   switcher used to sit. */
.zr-solshot{
  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(26px,3.2vw,52px); align-items:center;
}
.zr-solshot__copy{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.zr-solshot__copy .zr-pp__sub{ max-width:42ch; }
.zr-solshot__list{ display:grid; gap:11px; margin:2px 0 0; padding:0; list-style:none; }
.zr-solshot__list li{ display:flex; gap:10px; font-size:14.5px; line-height:22px; color:var(--pp-body); }
.zr-solshot__list i{
  display:grid; place-items:center; width:20px; height:20px; flex:0 0 auto;
  margin-top:1px; border-radius:6px; background:#E8F0FE; color:var(--zr-blue);
}
.zr-solshot__list i svg{ width:12px; height:12px; }
.zr-solshot__shot{
  margin:0; overflow:hidden; border-radius:16px;
  border:1px solid var(--pp-hair); background:#fff;
  box-shadow:0 0 0 1px rgba(23,33,54,.04), 0 34px 60px -38px rgba(23,33,54,.55);
}
.zr-solshot__shot img{ display:block; width:100%; height:auto; }

/* the audience switcher that closes every solutions page */
.zr-aud{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
.zr-aud a{ display:flex; align-items:center; gap:12px; padding:18px 20px; text-decoration:none; }
.zr-aud a[aria-current]{ border-color:#C9D6F2; background:#F8FBFF; }
.zr-aud i{ display:grid; place-items:center; width:34px; height:34px; flex:0 0 auto; border-radius:10px; background:#E8F0FE; color:var(--zr-blue); }
.zr-aud i svg{ width:17px; height:17px; }
.zr-aud b{ display:block; font-size:15.5px; font-weight:500; color:var(--pp-ink); }
.zr-aud span{ display:block; margin-top:2px; font-size:13px; color:var(--pp-dim); }

@media (max-width:1040px){
  .zr-idx{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .zr-tools3{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .zr-vals, .zr-vals:has(> :nth-child(4)):not(:has(> :nth-child(5))){ grid-template-columns:minmax(0,1fr); }
  .zr-proof{ grid-template-columns:minmax(0,1fr); }
  .zr-story{ grid-template-columns:minmax(0,1fr); }
  .zr-people{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .zr-rm{ grid-template-columns:minmax(0,1fr); }
  .zr-pain{ grid-template-columns:minmax(0,1fr); }
  .zr-solshot{ grid-template-columns:minmax(0,1fr); gap:28px; }
  .zr-honest{ grid-template-columns:minmax(0,1fr); }
  .zr-aud{ grid-template-columns:minmax(0,1fr); }
  .zr-rowlist--3{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:720px){
  .zr-idx, .zr-idx--2, .zr-tools3{ grid-template-columns:minmax(0,1fr); }
  .zr-rowlist, .zr-rowlist--3{ grid-template-columns:minmax(0,1fr); }
  .zr-cl__entry{ grid-template-columns:minmax(0,1fr); gap:14px; }
  .zr-cl__when{ flex-direction:row; align-items:center; gap:10px; }
  .zr-people{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/* ── platforms tracked, side by side ──────────────────────────────────────
   The live vs pages list every engine each tool watches. A count alone
   hides the interesting part, which is *which* ones are missing. */
.zr-plat{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; align-items:start; }
.zr-plat__col{ padding:22px 24px 24px; }
.zr-plat__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid #EEF1F5; }
.zr-plat__top b{ font-size:17px; font-weight:500; color:var(--pp-ink); }
.zr-plat__col ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.zr-plat__col li{
  display:inline-flex; align-items:center; gap:7px; padding:7px 12px;
  border-radius:999px; background:#F4F5F7; font-size:13px; color:var(--pp-body);
}
.zr-plat__col li::before{ content:""; width:6px; height:6px; border-radius:50%; background:#C3C8CF; flex:0 0 auto; }
.zr-plat__col--us li{ background:#EFF5FF; color:#1D4ED8; }
.zr-plat__col--us li::before{ background:#1463F5; }
@media (max-width:720px){ .zr-plat{ grid-template-columns:minmax(0,1fr); } }

/* a published testimonial, in the card language */
.zr-say{ display:flex; flex-direction:column; gap:18px; margin:0; padding:26px 24px 24px; }
.zr-say blockquote{ margin:0; font-size:15.5px; line-height:25px; color:var(--pp-body); text-wrap:pretty; }
.zr-say figcaption{ display:flex; align-items:center; gap:12px; margin-top:auto; }
.zr-say img{ width:44px; height:44px; border-radius:12px; object-fit:cover; flex:0 0 auto; background:linear-gradient(140deg,#DCE6F7,#B9CDEE); }
.zr-say figcaption b{ display:block; font-size:15px; font-weight:500; color:var(--pp-ink); }
.zr-say figcaption span span{ display:block; margin-top:2px; font-size:13px; color:var(--pp-dim); }

/* the wider tool catalogue — a category per tile */
.zr-cats{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; }
.zr-cat{
  display:flex; flex-direction:column; gap:6px; padding:20px 18px;
  background:#fff; border:1px solid #EDF1F7; border-radius:14px; text-decoration:none;
  transition:border-color .16s var(--zr-ease-out-quad), background .16s var(--zr-ease-out-quad);
}
.zr-cat:hover{ border-color:#C9D6F2; background:#F8FBFF; }
.zr-cat b{ font-size:15.5px; font-weight:500; color:var(--pp-ink); }
.zr-cat span{ font-family:var(--pp-mono); font-size:11.5px; color:var(--zr-blue); }
.zr-cat p{ margin:4px 0 0; font-size:13px; line-height:19px; color:var(--pp-dim); text-wrap:pretty; }
@media (max-width:1040px){ .zr-cats{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:620px){ .zr-cats{ grid-template-columns:minmax(0,1fr); } }

/* ── the client row, on the case-studies index ─────────────────────────────
   Five lockups, each flattened to currentColor, on one line that wraps to
   two or three as the screen narrows. They are set in the page's dim ink
   rather than full black so a wall of seven-odd brand marks does not outweigh
   the three stories underneath it. */
.zr-clients{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:clamp(26px,4vw,56px);
  padding:clamp(22px,3vw,34px) clamp(18px,3vw,32px);
  border:1px solid #EDF1F7; border-radius:18px;
  background:#fff; box-shadow:0 6px 16px -6px rgba(31,36,41,.05);
}
.zr-clients__item{ display:flex; align-items:center; color:#6B7480; opacity:.85; transition:color .2s var(--zr-ease), opacity .2s var(--zr-ease); }
.zr-clients__item:hover{ color:var(--pp-ink); opacity:1; }
.zr-clients__item svg{ height:clamp(20px,2.2vw,26px); width:auto; }
@media (max-width:560px){
  .zr-clients{ gap:22px 28px; }
}