/* 05 — Controlled Proof: collage (Figma 712:8923 desktop v2, 1920 base / 353:2458 mobile) */
.proof {
  position: relative;
  z-index: 0;
  background: var(--surface-accent);
  font-family: var(--font);
  color: var(--text-ink);
}
.proof .proof-track {
  /* extra scroll length so the whole choreography (title scale + cards gathering) plays inside the block */
  position: relative;
  /* 150vh drives the choreography, then 70vh of hold on the finished state,
     then 100vh while the next section slides over it */
  height: calc(900px + 320vh);
}
.proof .proof-inner {
  position: sticky;
  /* the stage is 100vh tall, so it pins flush; on short viewports it centres the 900px minimum */
  top: min(0px, calc(50vh - 350px));
  width: 100%;
  /* fills the viewport so the clip edges ARE the screen edges (the bottom card must not
     surface from a horizontal line on tall displays) */
  height: 100vh;
  min-height: 700px;
  margin: 0 auto;
  /* full-bleed so the clip edges are the screen edges: the cards really fly in from off-screen.
     must not sit on .proof itself or it kills the sticky pin */
  overflow: hidden;
  /* distance from the screen edge to the side cards; keeps a 48px gutter to the 672px copy column */
  --ring-m: max(16px, calc(50vw - 704px));
}

/* ---------- Center block ---------- */
.proof .proof-center {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  width: 672px;
}
.proof .proof-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  text-align: center;
  /* oversized at rest, scaled down to its real size as the reader scrolls through the block (js sets --tscale) */
  transform: scale(var(--tscale, 1));
  transform-origin: 50% 50%;
  will-change: transform;
}
.proof .proof-title {
  margin: 0;
  width: 100%;
  color: var(--brand-primary);
}
.proof .proof-title-line { display: block; }

.proof .proof-actions {
  /* hangs under the (layout-stable) heading so the heading itself stays centred in the section */
  position: absolute;
  top: calc(100% + 48px);
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 672px;
  opacity: var(--acta, 1);
  transform: translateY(calc((1 - var(--acta, 1)) * 24px));
  pointer-events: var(--act-pe, auto);
}
.proof .proof-actions .btn { padding: 11px 24px; } /* 48px tall as in Figma */
.proof .proof-actions .btn-primary {
  /* the same accent halo as the active step card */
  /* soft halo: hugs the button and stays off the note text underneath */
  box-shadow: 0 0 16px 4px rgba(205,255,140,.30), 0 6px 40px 10px rgba(205,255,140,.28); /* soft accent halo — keeps the button visible against the dark cards */
  transition: box-shadow .5s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
}
.proof .proof-actions .btn-primary:hover { box-shadow: 0 0 20px 6px rgba(205,255,140,.36), 0 8px 48px 12px rgba(205,255,140,.34); }
.proof .proof-note {
  margin: 0;
  color: var(--text-muted);
  text-align: center;
  white-space: nowrap;
}

/* ---------- Cards ---------- */
.proof .proof-cards { list-style: none; margin: 0; padding: 0; }
.proof .proof-card {
  position: absolute;
  width: 320px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 24px;
  background: var(--text-ink);
  border-radius: var(--radius-12);
  overflow: hidden;
  color: var(--text-inverse);
}
/* Gathered ring — the cards always live here; js pushes them off-screen with a transform that
   is tied 1:1 to the scroll position, so every scroll tick moves them (no timed transition).
   Tops are percentages of the stage so the composition holds at any screen height (they reproduce
   the Figma 150 / 450 / 700 of the 900px stage exactly). */
.proof .proof-card-invoice   { left: var(--ring-m); top: 16.5%; }
.proof .proof-card-sales     { left: calc(100% - 320px - var(--ring-m)); top: 16.5%; }
.proof .proof-card-insurance { left: calc(100% - 320px - var(--ring-m)); top: 50%; }
.proof .proof-card-purchase  { left: var(--ring-m); top: 50%; }
.proof .proof-card-work      { left: calc(50% - 160px); top: 76%; } /* clears the CTA + note */
.proof .proof-card { will-change: transform; }
@media (prefers-reduced-motion: reduce) { .proof .proof-card { transition: none; } }
.proof .proof-card-icon { width: 28px; height: 28px; display: block; flex-shrink: 0; }
.proof .proof-card-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}
.proof .proof-card-title { margin: 0; width: 100%; color: var(--text-inverse); font: 500 20px/24px var(--font); letter-spacing: -0.02em; } /* Figma: Headings Mobile/H5 */
.proof .proof-card-desc  { margin: 0; width: 100%; color: var(--text-inverse); }

/* ---------- Tablet fallback (< 1440): stacked grid, no pin/scale — the collage needs 1440+ ---------- */
@media (max-width: 1439px) {
  .proof .proof-track { height: auto; }
  .proof .proof-header { transform: none; }
  .proof .proof-actions {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .proof .proof-inner {
    position: static;
    overflow: visible;
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 64px 16px;
    box-sizing: border-box;
  }
  .proof .proof-center { display: contents; }
  .proof .proof-header { order: 1; gap: 12px; }
  .proof .proof-cards {
    order: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    max-width: 672px;
  }
  .proof .proof-card {
    position: static;
    width: auto;
    padding: 16px;
    transform: none !important;
  }
  .proof .proof-card-work { grid-column: 1 / -1; }
  .proof .proof-actions { order: 3; max-width: 672px; }
  .proof .proof-note { white-space: normal; }
}

/* ---------- Mobile (Figma 353:2458, 375 wide) ---------- */
@media (max-width: 767px) {
  .proof .proof-inner { gap: 24px; padding: 64px 16px; }
  .proof .proof-title { font-size: 32px; line-height: 36px; letter-spacing: -0.03em; }
  .proof .proof-cards { gap: 12px; max-width: none; align-items: stretch; }
  .proof .proof-card { padding: 16px; gap: 12px; }
  .proof .proof-card-icon { width: 24px; height: 24px; } /* Figma 781:56: 24px icon */
  .proof .proof-card-text { gap: 4px; }
  .proof .proof-card-title { font: 600 16px/20px var(--font); letter-spacing: -0.04em; } /* Body SemiBold */
  .proof .proof-actions { gap: 16px; max-width: 672px; margin-top: 16px; } /* 24 gap + 16 = 40 of air above the CTA */
  /* on the light section the dark button reads as lost — use the accent (hover) fill by default */
  .proof .proof-actions .btn { width: 100%; box-shadow: none; }
  .proof .proof-actions .btn-primary { background: var(--brand-accent); color: var(--text-ink); border-color: var(--brand-accent); }
  .proof .proof-actions .btn-primary:hover { box-shadow: none; }
}