/*
 * Home "Our track record" (2026-10-23), dark version. Only active once almano-proof-stats.js has added
 * `alm-ps-on` to the row; without the script the old beige layout (global WPBakery CSS) shows.
 * The side gutter comes from the global `.proof-row .wpb_wrapper` padding (var(--side-padding)).
 * The dark background is set inline by the script: the global CSS paints the row and its column beige
 * with !important rules that a stylesheet cannot outrank.
 */
html body .vc_row.proof-row.alm-ps-on {
  overflow: hidden;
  padding-top: clamp(60px, 7.5vw, 112px) !important;
  padding-bottom: clamp(60px, 7.5vw, 112px) !important;
}
html body .proof-row.alm-ps-on .wpb_wrapper > .wpb_content_element { display: none !important; }

/* Since 2026-10-25 the design is in the page (Raw HTML block `proof-ps`): dark from the first paint, no script
   needed for the look. The inset shadow paints over the row's own !important beige; the column needs a
   stronger selector than the global one. */
html body .vc_row.proof-row:has(.alm-ps) {
  overflow: hidden;
  box-shadow: inset 0 0 0 100vmax #141414 !important;
  padding-top: clamp(60px, 7.5vw, 112px) !important;
  padding-bottom: clamp(60px, 7.5vw, 112px) !important;
}
html body.home .vc_row.proof-row:has(.alm-ps) > .wpb_column { background: transparent !important; }
html body .proof-row .wpb_raw_code:has(.alm-ps) { flex: 1 1 100%; width: 100%; min-width: 0; margin: 0 !important; }
html body .proof-row .wpb_raw_code:has(.alm-ps) > .wpb_wrapper { padding: 0 !important; margin: 0 !important; }

.proof-row .alm-ps { position: relative; flex: 1 1 100%; width: 100%; min-width: 0; color: #FFFFFF; }
.proof-row .alm-ps::before {
  content: ""; position: absolute; width: 900px; height: 900px; left: -330px; top: -560px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(248, 199, 87, .16), rgba(248, 199, 87, 0)); pointer-events: none;
}
.proof-row .alm-ps-in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
}
.proof-row .alm-ps-eyebrow {
  display: block; font: 600 12px/1 Poppins, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #F8C757;
}
/* global `.proof-row h2` rules use !important, so these must too */
.proof-row .alm-ps .alm-ps-title {
  margin: 14px 0 0 !important; padding: 0 !important; font-family: Poppins, system-ui, sans-serif !important; font-weight: 700 !important;
  font-size: clamp(31px, 3.4vw, 46px) !important; line-height: 1.08 !important; letter-spacing: -.02em !important;
  color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
}
.proof-row .alm-ps-n {
  display: inline-block; font-family: Poppins, system-ui, sans-serif; font-weight: 700; font-variant-numeric: tabular-nums;
  white-space: nowrap; font-size: clamp(38px, 4vw, 56px); line-height: 1; letter-spacing: -.03em; color: #FFFFFF;
}
.proof-row .alm-ps-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.proof-row .alm-ps-u { color: #FFFFFF; } /* owner 2026-10-23: endings ("M+", "+", "days", "/5") white like the number */
.proof-row .alm-ps-u.alm-ps-word { font-size: .42em; letter-spacing: -.01em; margin-left: .12em; }
.proof-row .alm-ps-n small { font-size: .42em; font-weight: inherit; letter-spacing: -.01em; margin-left: .12em; }
.proof-row .alm-ps-l { margin-top: 8px; font: 400 14.5px/1.4 Inter, system-ui, sans-serif; color: rgba(255, 255, 255, .72); }

.proof-row .alm-ps-hero { margin-top: clamp(28px, 4vw, 48px); }
.proof-row .alm-ps-hero .alm-ps-n { display: block; font-size: clamp(84px, 10.5vw, 148px); line-height: .92; letter-spacing: -.045em; color: #F8C757; }
.proof-row .alm-ps-hero .alm-ps-u { color: #F8C757; }
.proof-row .alm-ps-hero .alm-ps-l { margin-top: 12px; font-size: 17px; font-weight: 500; color: rgba(255, 255, 255, .78); }

.proof-row .alm-ps-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, .14); }
.proof-row .alm-ps-st { min-width: 0; padding: 24px 0 26px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.proof-row .alm-ps-st:nth-child(even) { padding-left: 28px; border-left: 1px solid rgba(255, 255, 255, .14); }
.proof-row .alm-ps-st.alm-ps-wide { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
.proof-row .alm-ps-rating { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.proof-row .alm-ps-stars { display: inline-flex; gap: 3px; color: #F8C757; flex: none; }
.proof-row .alm-ps-stars svg { width: 20px; height: 20px; fill: currentColor; }
.proof-row span.alm-ps-stars:not(:has(svg)) { font-size: 21px; line-height: 1; letter-spacing: 4px; }

@media (max-width: 767px) {
  .proof-row .alm-ps-in { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .proof-row .alm-ps-hero .alm-ps-n { font-size: clamp(72px, 24vw, 104px); }
  .proof-row .alm-ps-st { padding: 20px 0 22px; }
  .proof-row .alm-ps-st:nth-child(even) { padding-left: 18px; }
  .proof-row .alm-ps-n { font-size: clamp(32px, 9.6vw, 42px); }
  .proof-row .alm-ps-l { font-size: 13.5px; }
  .proof-row .alm-ps-stars svg { width: 17px; height: 17px; }
}
