.proof {
  position: relative;
  padding-bottom: var(--section-y);
  background:
    radial-gradient(50% 30% at 100% 55%, rgba(143, 227, 245, 0.25), transparent 70%),
    var(--paper);
}
.proof__seam { height: clamp(140px, 16vw, 220px); background: linear-gradient(to bottom, var(--ink-950), var(--paper)); }

.proof__head {
  margin-top: clamp(1rem, 3vw, 3rem);
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-6) var(--space-8); align-items: end;
}
.proof__head > div:first-child { display: grid; gap: var(--space-5); }
.proof__title { font-size: var(--fs-h1); line-height: 1; letter-spacing: -0.045em; max-width: 14ch; }

.klas {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center;
  padding: 20px 24px; border-radius: var(--r-lg);
  background: var(--paper-3); box-shadow: var(--shadow-paper);
  text-decoration: none; color: var(--on-paper);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med);
}
.klas:hover { transform: translateY(-3px); }
.klas__rank {
  font-family: var(--font-display); font-weight: 650; font-size: 3.2rem; letter-spacing: -0.06em; line-height: 1;
  background: linear-gradient(135deg, var(--accent-deep), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.klas__text { display: grid; gap: 4px; }
.klas__text span { color: var(--on-paper-muted); font-size: 0.9rem; line-height: 1.45; }

/* ---- Metrics: one lead number, three supporting ---- */
.metrics {
  margin-top: clamp(4rem, 8vw, 7rem);
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--paper-line);
}
.metric { padding: 28px 24px 0 0; display: grid; gap: 10px; align-content: start; }
.metric + .metric { padding-left: 24px; border-left: 1px solid var(--paper-line); }
.metric__value {
  font-family: var(--font-display); font-weight: 550; letter-spacing: -0.055em; line-height: 0.9;
  font-size: clamp(2.8rem, 5vw, 4.5rem); color: var(--on-paper);
  font-variation-settings: "opsz" 96, "wdth" 85;
}
.metric--lead .metric__value { font-size: clamp(4rem, 9.5vw, 8.5rem); color: var(--accent-deep); }
.metric__label { color: var(--on-paper-muted); max-width: 22ch; }

/* ---- Study band ---- */
.study {
  position: relative; overflow: hidden;
  margin-top: clamp(4rem, 8vw, 7rem);
  padding: clamp(28px, 5vw, 56px);
  border-radius: var(--r-xl);
  background: var(--ink-900); color: var(--on-ink);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--space-7); align-items: end;
}
.study__glow {
  position: absolute; inset: -40% -10% auto auto; width: 60%; height: 140%;
  background: radial-gradient(circle, rgba(255, 180, 140, 0.25), transparent 60%);
  pointer-events: none;
}
.study__intro { position: relative; display: grid; gap: 14px; }
.study__eyebrow { color: var(--evidence); }
.study__claim { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 550; letter-spacing: -0.03em; line-height: 1.15; max-width: 16ch; }
.study__nums { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.study__num { display: grid; gap: 8px; }
.study__value { font-family: var(--font-display); font-weight: 550; font-size: clamp(3rem, 6vw, 5.2rem); letter-spacing: -0.06em; line-height: 0.9; }
.study__label { color: var(--on-ink-muted); font-size: 0.92rem; }

/* ---- Testimonials ---- */
.tm { margin-top: clamp(5rem, 10vw, 8rem); }
.tm__label { color: var(--on-paper-faint); }
.tm__grid {
  margin-top: var(--space-5);
  display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: var(--space-8);
  align-items: start;
}
.tm__feature { position: relative; margin: 0; min-height: 360px; padding-top: 56px; }
.tm__mark {
  position: absolute; left: -0.06em; top: -0.18em;
  font-family: var(--font-display); font-size: 12rem; line-height: 1; color: var(--accent); opacity: 0.16;
  pointer-events: none;
}
.tm__quote {
  position: relative; margin: 0;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.6rem, 2.9vw, 2.6rem); line-height: 1.14; letter-spacing: -0.03em;
  color: var(--on-paper); text-wrap: pretty;
}
.tm__quote.is-long { font-size: clamp(1.35rem, 2.2vw, 2rem); line-height: 1.2; }
.tm__quote.is-xlong { font-size: clamp(1.2rem, 1.8vw, 1.65rem); line-height: 1.28; letter-spacing: -0.02em; }
.tm__who { margin-top: 32px; display: flex; gap: 14px; align-items: center; }
.tm__who > span:last-child { display: grid; }
.tm__who span span { color: var(--on-paper-muted); font-size: 0.92rem; }
.tm__avatar {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: linear-gradient(135deg, var(--dawn), var(--accent)); color: var(--on-accent); font-weight: 650; font-size: 0.9rem;
}

.tm__list { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--paper-line); }
.tm__list li { border-bottom: 1px solid var(--paper-line); }
.tm__list button {
  all: unset; box-sizing: border-box; cursor: pointer; position: relative; width: 100%;
  display: grid; gap: 2px; padding: 14px 4px;
  transition: padding var(--dur-med) var(--ease-out);
}
.tm__list button:hover { padding-left: 10px; }
.tm__list button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.tm__listname { font-weight: 600; color: var(--on-paper-faint); transition: color var(--dur-med); }
.tm__listorg { font-size: 0.84rem; color: var(--on-paper-faint); }
.tm__list button.is-on .tm__listname, .tm__list button:hover .tm__listname { color: var(--on-paper); }
.tm__list button.is-on { padding-left: 10px; }
.tm__timer { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); transform-origin: left; }

@media (max-width: 980px) {
  .proof__head { grid-template-columns: minmax(0, 1fr); }
  .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .metric--lead { grid-column: 1 / -1; padding-bottom: 24px; border-bottom: 1px solid var(--paper-line); }
  .metric--lead + .metric { padding-left: 0; border-left: 0; }
  .study { grid-template-columns: minmax(0, 1fr); }
  .tm__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .tm__feature { min-height: 0; }
  .tm__list { display: flex; overflow-x: auto; gap: 8px; border: 0; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
  .tm__list li { border: 0; flex: none; scroll-snap-align: start; }
  .tm__list button { padding: 10px 14px; border-radius: 12px; background: var(--paper-2); }
  .tm__list button.is-on { background: var(--paper-3); box-shadow: var(--shadow-paper); padding-left: 14px; }
  .tm__list button:hover { padding-left: 14px; }
  .tm__timer { left: 14px; right: 14px; bottom: 4px; }
}
@media (max-width: 560px) {
  .metrics { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .metric { padding-right: 12px; }
  .metric + .metric { padding-left: 16px; }
  .metric:nth-child(4) { grid-column: 1 / -1; padding-left: 0; border-left: 0; margin-top: 24px; border-top: 1px solid var(--paper-line); }
  .study__nums { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .study__num { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 14px; }
  .tm__mark { font-size: 8rem; }
  .tm__feature { padding-top: 40px; }
}

/* Keep the featured quote in view while the list scrolls past */
@media (min-width: 981px) {
  .tm__feature { position: sticky; top: 120px; }
}

.klas { cursor: default; }
.klas.is-sample { border: 1px dashed rgba(154, 103, 0, 0.5); }
.klas__text .sample-tag { margin-top: 6px; }
.proof__tag { margin-top: clamp(4rem, 8vw, 7rem); }
.proof__tag + .metrics { margin-top: 16px; }
.metrics.is-sample .metric__value { color: var(--on-paper-faint); }
.metrics.is-sample .metric--lead .metric__value { color: var(--on-paper-faint); }
.tm__labelrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.study__intro .sample-tag { margin-bottom: 4px; }
.klas__text { min-width: 0; }
