/* ==========================================================================
   Proof Cards + Proof Card — Webflow code component styles
   (each renders inside its own Shadow DOM; both load this file)

   Same conventions as faq.css: the Figma frame is the source of truth, a
   Webflow variable is used only where its value matches Figma, every
   variable has the Figma value as fallback, ALL values live in the token
   block below.
   ========================================================================== */

:host {
  display: block;

  /* ===== Webflow variables (value matches Figma) ===== */

  --proof-font-primary:   var(--fonts--primary, "Bitter");
  --proof-font-secondary: var(--fonts--secondary, "Inter");

  --proof-text:      var(--colors--equity-blue, #132c3a);   /* Figma Text-Primary   */
  --proof-slate:     var(--colors--market-slate, #3c6e82);  /* Figma Text-Secondary */
  --proof-white:     var(--colors--white, #ffffff);         /* Figma Neutral-White  */
  --proof-off-white: var(--colors--clear-ledger, #f5f7fb);
  --proof-tint-blue: var(--colors--soft-trust, #d4f2fa);   /* Figma Brand-Light-Blue-Tint */

  --proof-pad-x:     var(--spacing--horizontal-padding, 5rem); /* 80px */
  --proof-pad-y:     var(--spacing--vertical-padding, 5rem);   /* 80px */
  --proof-max-width: var(--spacing--max-width, 1440px);
  --proof-radius:    var(--spacing--card-roundness, 2.5rem);   /* Figma 40px */

  /* ===== Fixed Figma values (no matching variable) ===== */

  --proof-pad-y-desktop: 6rem;     /* 96px top/bottom above 991px (on request) */
  --proof-pad-x-tablet: 2rem;     /* 32px sides at 991px and below (as FAQ/CTA/Team) */
  --proof-gap:          1.5rem;   /* 24px between cards */
  --proof-step:         4rem;     /* 64px: each column sits 64px lower than the one before */

  --proof-card-pad: 2.5rem;       /* 40px */
  --proof-card-gap: 1.25rem;      /* 20px content → link */
  --proof-text-gap: 1rem;         /* 16px title → body */

  --proof-title-size: 2rem;       /* 32px / 400 / 125% */
  --proof-title-lh:   125%;
  --proof-body-size:  1.125rem;   /* 18px / 300 / 150% */
  --proof-body-lh:    150%;

  /* Background image ("Vector" in Figma): 1098px wide, centred over the
     1280px card row, 85px above it */
  --proof-bg-w:   85.78%;
  --proof-bg-top: -5.3125rem;

  /* Scroll-in animation (not in Figma) */
  --proof-reveal-shift: 2rem;
  --proof-reveal-time:  0.6s;

  /* Derived */
  --proof-border: color-mix(in srgb, var(--proof-slate) 10%, transparent); /* = rgba(60,110,130,.10) */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ==========================================================================
   Proof Cards (section)
   ========================================================================== */

/* Container query anchored inside the Shadow DOM (see faq.css for why) */
.proof-section {
  container: proof / inline-size;
  overflow: clip;
  padding-inline: var(--proof-pad-x);
}

.proof-bg--white       { background: var(--proof-white); }
.proof-bg--off-white   { background: var(--proof-off-white); }
.proof-bg--light-blue  { background: var(--proof-tint-blue); }
.proof-bg--transparent { background: transparent; }

/* Webflow's tablet breakpoint (viewport, so it lines up with the rest of the site) */
@media (max-width: 991px) {
  .proof-section {
    padding-inline: var(--proof-pad-x-tablet);
  }
}

.proof-inner {
  width: 100%;
  max-width: var(--proof-max-width);
  margin-inline: auto;
  padding-block: var(--proof-pad-y);
}

/* Desktop (above Webflow's 991px tablet breakpoint) */
@media (min-width: 992px) {
  .proof-inner {
    padding-block: var(--proof-pad-y-desktop);
  }
}

.proof-stage {
  position: relative;
  isolation: isolate;
}

.proof-bg-img {
  position: absolute;
  z-index: -1;
  top: var(--proof-bg-top);
  left: 50%;
  width: var(--proof-bg-w);
  max-width: none;
  height: auto;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
}

/* Flex row that wraps, so a row with fewer than 3 cards is centred.
   --proof-card-w and --proof-stagger are inherited by the Proof
   Card components in the slot: each card sets its own width from
   --proof-card-w, and multiplies --proof-stagger by its column (0, 1, 2, set
   by ProofCards.tsx) for the staircase.

   Equal heights: cards in a row stretch to the tallest one. Each card is
   pushed down by its stagger and pulls its bottom up by the same amount
   (.proof), so every card ends up exactly the tallest card's height and the
   bottoms keep the staircase. The extra row gap / bottom padding makes room
   for the lowest column hanging below its row (--proof-max-col steps, set by
   ProofCards.tsx: 0 for one card, 1 for two, 2 for three or more). */
.proof-grid {
  --proof-stagger: var(--proof-step);
  --proof-card-w: calc((100% - 2 * var(--proof-gap)) / 3);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: calc(var(--proof-gap) + var(--proof-max-col, 2) * var(--proof-stagger)) var(--proof-gap);
  padding-bottom: calc(var(--proof-max-col, 2) * var(--proof-stagger));
}

/* Webflow wraps slot content in its own element. display: contents lets the
   cards inside that wrapper become the flex items. */
.proof-grid ::slotted(*) {
  display: contents;
}

/* Tablet: two columns, no staircase */
@container proof (max-width: 900px) {
  .proof-grid {
    --proof-stagger: 0rem;
    --proof-card-w: calc((100% - var(--proof-gap)) / 2);
  }
}

@container proof (max-width: 767px) {
  .proof-inner {
    padding-block: 4rem;
  }
}

/* Phone: one column */
@container proof (max-width: 600px) {
  .proof-grid {
    --proof-card-w: 100%;
    gap: 1rem;
  }

  .proof-bg-img {
    --proof-bg-w: 140%;
    top: 0;
  }
}

/* ==========================================================================
   Proof Card
   ========================================================================== */

/* Card width. On the live site Webflow renders each card's host as
   <code-island style="display: contents">, so the host has no box and .proof
   itself is the flex item; elsewhere the host is the flex item. Both get the
   width, and the rule on .proof does nothing when its parent isn't flex.
   (The width must be explicit: the container below has no intrinsic width.) */
:host([data-proof-card]) {
  flex: 0 0 var(--proof-card-w, 100%);
  min-width: 0;
}

/* Smaller sizes on narrow cards; the card is its own container so the
   values follow the card width, whatever the column count */
.proof {
  container: proofcard / inline-size;
  flex: 0 0 var(--proof-card-w, 100%);
  min-width: 0;
  /* auto (not 100%): only an auto height lets the row stretch it to the tallest card */
  height: auto;
  padding-top: calc(var(--proof-col, 0) * var(--proof-stagger, 0rem));
  margin-bottom: calc(var(--proof-col, 0) * var(--proof-stagger, 0rem) * -1);
}

.proof-card {
  display: flex;
  flex-direction: column;
  gap: var(--proof-card-gap);
  height: 100%;
  padding: var(--proof-card-pad);
  border: 1px solid var(--proof-border);
  border-radius: var(--proof-radius);
  background: var(--proof-white);
}

.proof-content {
  display: flex;
  flex-direction: column;
  gap: var(--proof-text-gap);
}

/* Figma: 8px under the text when the card has a link */
.proof-card.has-link .proof-content {
  padding-bottom: 0.5rem;
}

.proof-title {
  margin: 0;
  color: var(--proof-text);
  font-family: var(--proof-font-primary), Georgia, serif;
  font-size: var(--proof-title-size);
  font-weight: 400;
  line-height: var(--proof-title-lh);
}

.proof-body {
  color: var(--proof-slate);
  font-family: var(--proof-font-secondary), system-ui, sans-serif;
  font-size: var(--proof-body-size);
  font-weight: 300;
  line-height: var(--proof-body-lh);
  overflow-wrap: break-word;
}

/* Rich text inside the card's own Shadow DOM. On the live site Webflow passes
   the Rich Text in through a slot (light DOM), which these rules can't reach;
   that case is styled by body-slot-styles.ts with the same rules. */
.proof-body :is(p, li, blockquote, span) {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  overflow-wrap: inherit;
}

.proof-body p  { margin: 0 0 0.75rem; }
.proof-body ul,
.proof-body ol { margin: 0 0 0.75rem; padding-left: 1.25em; }
/* After the margins above, and as specific, so the first/last item wins */
.proof-body > :first-child:is(*) { margin-top: 0; }
.proof-body > :last-child:is(*)  { margin-bottom: 0; }
.proof-body a  { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.proof-body strong { font-weight: 600; }

/* Slot for the site's Link Block component, 20px under the text (card gap);
   the Link Block keeps its own Webflow styles. */
.proof-link {
  display: flex;
}

@container proofcard (max-width: 340px) {
  .proof-card {
    --proof-card-pad: 2rem;
    --proof-title-size: 1.625rem;   /* 26px */
    --proof-body-size: 1rem;
    border-radius: calc(var(--proof-radius) * 0.8);
  }
}

/* Scroll reveal: cards rise in, one column after another */
.proof.is-hidden .proof-card {
  opacity: 0;
  transform: translateY(var(--proof-reveal-shift));
}

.proof.is-shown .proof-card {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--proof-reveal-time) ease var(--proof-delay, 0ms),
    transform var(--proof-reveal-time) cubic-bezier(0.22, 1, 0.36, 1) var(--proof-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .proof.is-shown .proof-card {
    transition: none;
  }
}