/* Proof (quotes and logos), from Concept 4. Logical properties, so Arabic mirrors the bubble's quote
   mark, tail and caption indent. */
.proof-lede { margin-top: 16px; }
.quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); margin-top: clamp(48px, 5vw, 72px); }
.quote { display: flex; flex-direction: column; gap: 30px; min-width: 0; }
.quote blockquote {
  position: relative; margin: 0;
  padding: clamp(40px, 4vw, 54px) clamp(26px, 3.4vw, 44px) clamp(28px, 3.4vw, 44px);
  border-radius: 34px;
  background: var(--q); color: var(--ink);
  font: 500 clamp(1.15rem, 1rem + 0.55vw, 1.45rem)/1.45 var(--text);
  text-wrap: pretty;
}
.quote blockquote::before {
  content: "\201C"; content: "\201C" / "";
  position: absolute; top: -26px; inset-inline-start: 24px;
  font: 800 96px/1 var(--display); color: var(--qa);
}
/* The opening mark faces the text, so it mirrors with the page */
[dir="rtl"] .quote blockquote::before { transform: scaleX(-1); }
/* Speech-bubble tail: a right triangle under the bubble's start edge, mirrored in RTL */
.quote blockquote::after {
  content: ""; position: absolute; inset-inline-start: 62px; bottom: -24px;
  width: 26px; height: 26px; background: var(--q);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
[dir="rtl"] .quote blockquote::after { clip-path: polygon(0 0, 100% 0, 100% 100%); }
.quote figcaption { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 16px; padding-inline-start: 30px; }
.quote .ava { flex: none; width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 4px solid var(--ground); box-shadow: var(--shadow-sm); }
.who { display: grid; gap: 2px; flex: 1 1 180px; min-width: 0; }
.who b { font-weight: 800; font-size: 17px; }
.who span { font-size: 15px; line-height: 1.35; color: var(--ink-soft); }
/* The optional platform line (for example the platform a customer sends from), with its small logo */
.who .who-via { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 14px; }
.who .who-via img { flex: none; width: 16px; height: 16px; }
.logo-tile {
  flex: none; display: block;
  width: 188px; height: 84px; padding: 17px 22px;
  border-radius: 18px; border: 1px solid var(--tile-dark); background: var(--tile-dark);
}
/* Sized to the padded box (a percentage max-height never resolves in an auto grid row, which let logos overflow) */
.logo-tile img { display: block; width: 100%; height: 100%; object-fit: contain; }
.logo-tile.light { background: var(--tile-light); border-color: var(--tile-light-line); }
/* A logo with its own dark-background version: the tile follows the theme */
.logo-tile .on-dark { display: none; }
.logo-tile.themed { padding: 13px 18px; }  /* the ring-and-text mark reads small at the shared inset */
:root[data-theme="dark"] .logo-tile.themed { background: var(--tile-dark); border-color: var(--tile-dark); }
:root[data-theme="dark"] .logo-tile .on-light { display: none; }
:root[data-theme="dark"] .logo-tile .on-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-tile.themed { background: var(--tile-dark); border-color: var(--tile-dark); }
  :root:not([data-theme="light"]) .logo-tile .on-light { display: none; }
  :root:not([data-theme="light"]) .logo-tile .on-dark { display: block; }
}
.proof-links { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: clamp(36px, 4vw, 52px); }
.link-logo { display: inline-block; width: 20px; height: 20px; margin-inline-end: 9px; vertical-align: -0.28em; }

/* Responsive */
@media (max-width: 959px) {
  .quotes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 719px) {
  .quote figcaption { padding-inline-start: 0; }
  .logo-tile { margin-inline-start: 0; }
}
@media (max-width: 479px) {
  .logo-tile { width: 168px; height: 76px; padding: 15px 19px; }
  .logo-tile.themed { padding: 12px 16px; }
}

/* Platform figures beside the quote (the landing pages' proof): organic blobs, as the home page's outcome figures.
   The rows share one first column (subgrid), as wide as the widest blob, so the labels line up. */
.proof-figs { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; gap: clamp(16px, 2vw, 24px) 20px; margin: 0; }
.proof-fig { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; }
@supports not (grid-template-columns: subgrid) {
  .proof-fig { grid-template-columns: minmax(0, 8.6rem) minmax(0, 1fr); gap: 20px; }
}
.proof-fig dd { justify-self: center; }
.proof-fig dt { order: 2; min-width: 0; font: 700 17px/1.4 var(--text); text-wrap: pretty; }
.proof-fig dt img { display: inline-block; width: 20px; height: 20px; margin-inline-end: 8px; vertical-align: -0.24em; }
.proof-fig dd { order: 1; margin: 0; }
.proof-figs .proof-num {
  display: grid; place-items: center;
  min-width: 7.4rem; min-height: 5.4rem; padding: 12px 20px;
  border-radius: 58% 42% 50% 50% / 46% 54% 46% 54%;
  background: var(--b); color: var(--ink);
  font: 800 clamp(1.7rem, 1.3rem + 1.1vw, 2.3rem)/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  white-space: nowrap;
  rotate: var(--tilt, 0deg);
  box-shadow: var(--shadow-sm);
  unicode-bidi: plaintext;  /* the figure reads in its own direction: "100K+" keeps its plus sign after the number in right-to-left pages */
}
[dir="rtl"] .proof-figs .proof-num { rotate: calc(var(--tilt, 0deg) * -1); }
@media (max-width: 479px) {
  .proof-figs .proof-num { min-width: 6.2rem; min-height: 4.6rem; padding: 10px 14px; }
  .proof-fig dt { font-size: 16px; }
}

/* Results beside the quotes (optional, as on the industry pages): the quotes on the start side, approved figures in
   the home page's outcome blobs on the end side, each credited to its source, with the review links stacked under
   them. The blobs carry the hand-placed tilt, mirrored right to left. */
.proof-split {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center;
  gap: 48px clamp(40px, 6vw, 96px); margin-top: clamp(48px, 5vw, 72px);
}
.proof-split-quotes { display: grid; gap: clamp(28px, 4vw, 64px); min-width: 0; }
.proof-results { display: grid; gap: 26px; justify-items: start; min-width: 0; }
.proof-blobs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: min(100%, 480px); }
.proof-blob {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 200px; padding: 28px 22px;
  text-align: center;
  background: var(--b); color: var(--on-bright);
  border-radius: 58% 42% 50% 50% / 46% 54% 46% 54%;
  rotate: -2deg;
}
.proof-blob:nth-child(2) { border-radius: 44% 56% 52% 48% / 56% 46% 54% 44%; rotate: 2deg; }
.proof-blob:nth-child(3) { border-radius: 52% 48% 40% 60% / 50% 58% 42% 50%; }
[dir="rtl"] .proof-blob { rotate: 2deg; }
[dir="rtl"] .proof-blob:nth-child(2) { rotate: -2deg; }
.proof-blob .proof-num { max-width: 100%; font: 800 clamp(2.1rem, 1.5rem + 1.4vw, 2.9rem)/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; hyphens: auto; }
.proof-blob .proof-num.is-long { font-size: clamp(1.35rem, 1.1rem + 0.6vw, 1.7rem); line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; }
.proof-label { max-width: 15ch; font-weight: 700; font-size: 15px; line-height: 1.3; text-wrap: balance; }
.proof-credit { font-size: 12px; font-weight: 500; }
.proof-results .proof-links { margin-top: 0; flex-direction: column; align-items: flex-start; gap: 0; }
@media (max-width: 959px) {
  .proof-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 479px) {
  .proof-blob { min-height: 168px; padding: 22px 14px; }
}