/* ============================================================
   HpProof — "Why practices switch" credibility band
   Namespace: .proof-*  (light section, sand-blue theme vars)

   De-boxed: the swap comparison and the six proof facts sit
   directly on the page. Hairline --line dividers + whitespace do
   the structure; the ONE softly tinted surface is the DocsDocs
   $1,500 side of the swap. No card chrome, no drop shadows.
   ============================================================ */

.proof {
  padding: clamp(64px, 9vw, 116px) 0;
  background:
    radial-gradient(1100px 480px at 85% -10%, var(--periwinkle) 0%, transparent 62%),
    transparent;
  overflow: hidden;
}

.proof-head { max-width: 62ch; }

/* ---------------- THE SWAP — open comparison, no outer card ---------------- */

.proof-swap {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) auto minmax(0, 1fr);
  gap: clamp(24px, 3.6vw, 52px);
  align-items: stretch;
  padding: clamp(8px, 1.4vw, 18px) 0 0;
  margin-bottom: clamp(48px, 6.5vw, 84px);
}

.proof-col { min-width: 0; display: flex; flex-direction: column; }

.proof-col-t {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.proof-col-sub {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-40);
  text-transform: none;
}

/* old-stack line items — open rows on hairlines */
.proof-lines { list-style: none; margin: 0; padding: 0; flex: 1; }
.proof-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--ink-60);
}
.proof-line:last-child { border-bottom: 0; }
.proof-line-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-40); opacity: 0.5; flex: none;
}
.proof-line-name {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.proof-line-login {
  flex: none;
  font-size: 10px; font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.proof-line-price {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink-70, var(--ink-60));
}
.proof-line-price i { font-style: normal; font-weight: 500; color: var(--ink-40); font-size: 11.5px; }

.proof-total {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ink-40);
}
.proof-total-l { font-size: 12.5px; font-weight: 600; color: var(--ink-60); }
.proof-total-logins {
  font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-40);
}
.proof-total-n {
  margin-left: auto;
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.proof-total-n i { font-style: normal; font-size: 0.55em; font-weight: 500; color: var(--ink-40); }

/* center arrow */
.proof-arrow {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--indigo);
}
.proof-arrow-t {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-40);
}

/* DocsDocs side — the one softly tinted surface in this section */
.proof-col-new {
  background: linear-gradient(165deg, var(--periwinkle) 0%, color-mix(in srgb, #5a82c2 3%, white) 88%);
  border-radius: 18px;
  padding: clamp(18px, 2.2vw, 28px);
}
.proof-col-new .proof-col-t { border-bottom-color: rgba(90, 130, 194, 0.22); }
.proof-one {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  padding: 12px 0 4px;
}
.proof-one-l {
  width: 100%;
  font-size: 12.5px; font-weight: 600; color: var(--ink-60);
}
.proof-one-n {
  font-size: clamp(40px, 4.2vw, 56px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--indigo);
  font-variant-numeric: tabular-nums;
}
.proof-one-n i { font-style: normal; font-size: 0.36em; font-weight: 500; color: var(--ink-40); letter-spacing: 0; }
.proof-one-login {
  font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--indigo, #3d63a4);
}
.proof-one-p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-60);
  margin: 10px 0 0;
}
.proof-one-p b { color: var(--ink); font-weight: 700; }
.proof-save { margin-top: auto; padding-top: 16px; }
.proof-save-chip {
  display: inline-block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--indigo, #3d63a4);
  font-variant-numeric: tabular-nums;
}

/* ---------------- PROOF FACTS — open cells on hairlines ---------------- */

.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(28px, 4vw, 52px);
  row-gap: clamp(34px, 4.5vw, 52px);
}

.proof-tile {
  border-top: 1px solid var(--line);
  padding: clamp(20px, 2.3vw, 26px) 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.proof-tile-stat { margin-bottom: 2px; }
.proof-tile-stat b {
  font-size: clamp(38px, 3.8vw, 50px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--indigo);
  font-variant-numeric: tabular-nums;
}

/* icons: plain strokes, no chip box */
.proof-tile-ic {
  display: flex;
  align-items: center;
  min-height: 26px;
  color: var(--accent, #5a82c2);
  margin-bottom: 2px;
}
.proof-tile-ic svg { width: 24px; height: 24px; }

.proof-live-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--teal, #2f9e8f);
  position: relative;
  margin-left: 4px;
}
.proof-live-dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--teal, #2f9e8f);
  opacity: 0.5;
  animation: proof-ping 2.2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes proof-ping {
  0% { transform: scale(0.55); opacity: 0.7; }
  70%, 100% { transform: scale(1.35); opacity: 0; }
}

/* Two-deck headline: bold key fact on top, sand-blue kicker below */
.proof-tile-h {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.proof-tile-h b {
  font-size: clamp(18px, 1.9vw, 22px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.18;
}
.proof-tile-h span {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--accent, #5a82c2);
  line-height: 1.35;
}
.proof-tile p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-60);
  margin: 0;
}
.proof-tile p b { color: var(--ink); font-weight: 700; }

/* system names: plain inline text run, dot-separated */
.proof-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin: 6px 0 0;
  padding: 0;
}
.proof-chip {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--indigo, #3d63a4);
  white-space: nowrap;
}
.proof-chip + .proof-chip::before {
  content: "\00B7";
  margin: 0 8px;
  color: var(--ink-40);
  font-weight: 400;
}

.proof-foot {
  margin: clamp(28px, 3.5vw, 40px) 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-40);
  max-width: 74ch;
}

/* ---------------- RESPONSIVE ---------------- */

@media (max-width: 960px) {
  .proof-swap { grid-template-columns: 1fr; }
  .proof-arrow { flex-direction: row; padding: 2px 0; }
  .proof-arrow svg { transform: rotate(90deg); }
  .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .proof-grid { grid-template-columns: 1fr; row-gap: 28px; }
  .proof-line-login { display: none; }
}

@media (prefers-reduced-motion: reduce), (max-width: 700px) {
  .proof-live-dot::after { animation: none; opacity: 0; }
}