/* ============================================================
   WHY — proof graphic
   Layered composition: rotated gantt schedule on a polygonal
   blob, with 3 floating metric cards stacked diagonally.
   ============================================================ */

.why-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 64px;
  margin: 56px 0 16px;
  align-items: start;
}
@media (max-width: 980px) {
  .why-split {
    grid-template-columns: 1fr;
    gap: 56px;
  }
}

/* ----- Left column: stacked reasons ----- */
.why-reasons {
  display: flex;
  flex-direction: column;
}
.why-reason {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  padding: 24px 0;
  border-top: 1px solid hsl(var(--border));
}
.why-reason:first-child { border-top: none; padding-top: 0; }
.why-reason:last-child  { padding-bottom: 0; }

.why-reason-num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: hsl(var(--primary));
  letter-spacing: .04em;
  padding-top: 4px;
}
.why-reason-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.2;
  margin: 0 0 8px;
  text-wrap: balance;
}
.why-reason-text {
  font-size: 15px;
  line-height: 1.6;
  color: hsl(var(--muted-foreground));
  margin: 0;
}

/* ----- Right column: proof graphic ----- */
.why-proof {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.92;
  max-width: 560px;
  margin-left: auto;
  min-height: 420px;
}
@media (max-width: 980px) {
  .why-proof { margin: 0 auto; }
}

/* Background plane — blob + gantt, rotated as a single layer */
.why-proof-bg {
  position: absolute;
  inset: -4% -8% -4% -4%;
  transform: rotate(5deg);
  transform-origin: center center;
  pointer-events: none;
}

/* Blob — soft polygonal lavender-blue shape behind the gantt */
.why-proof-blob {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    hsl(218 65% 92%) 0%,
    hsl(218 75% 86%) 40%,
    hsl(218 70% 90%) 100%);
  clip-path: polygon(
    8% 12%,
    72% 4%,
    96% 28%,
    92% 64%,
    78% 92%,
    32% 96%,
    4% 72%,
    12% 38%
  );
  opacity: .85;
}

/* Gantt — sits on top of the blob, shifted in so it doesn't fill blob fully */
.why-proof-gantt {
  position: absolute;
  inset: 14% 8% 12% 12%;
  border-radius: 14px;
  background:
    linear-gradient(to right,
      transparent 0,
      transparent calc(20% - 0.5px),
      hsl(218 25% 80% / .35) calc(20% - 0.5px),
      hsl(218 25% 80% / .35) calc(20% + 0.5px),
      transparent calc(20% + 0.5px),
      transparent calc(40% - 0.5px),
      hsl(218 25% 80% / .35) calc(40% - 0.5px),
      hsl(218 25% 80% / .35) calc(40% + 0.5px),
      transparent calc(40% + 0.5px),
      transparent calc(60% - 0.5px),
      hsl(218 25% 80% / .35) calc(60% - 0.5px),
      hsl(218 25% 80% / .35) calc(60% + 0.5px),
      transparent calc(60% + 0.5px),
      transparent calc(80% - 0.5px),
      hsl(218 25% 80% / .35) calc(80% - 0.5px),
      hsl(218 25% 80% / .35) calc(80% + 0.5px),
      transparent calc(80% + 0.5px)
    );
}

.why-proof-gantt-rail {
  position: absolute;
  top: -22px;
  left: 0; right: 0;
  height: 18px;
}
.why-proof-gantt-day {
  position: absolute;
  top: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: hsl(218 25% 46%);
  font-weight: 500;
}
.why-proof-gantt-day.is-now {
  color: #fff;
  background: hsl(218 70% 18%);
  border-radius: 50%;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  top: -4px;
  margin-left: -4px;
}

/* Vertical playhead line */
.why-proof-gantt-playhead {
  position: absolute;
  top: -22px;
  bottom: 0;
  left: 8%;
  width: 1.5px;
  background: hsl(218 70% 25%);
  opacity: .7;
}

.why-proof-gantt-bars {
  position: absolute;
  inset: 0;
}
.why-proof-gantt-bar {
  position: absolute;
  height: 18px;
  background: hsl(218 18% 60% / .8);
  border-radius: 3px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0;
}
.why-proof.is-visible .why-proof-gantt-bar {
  animation: gantt-draw 600ms cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes gantt-draw {
  0%   { transform: scaleX(0); opacity: 0; }
  100% { transform: scaleX(1); opacity: 1; }
}
.why-proof-gantt-bar-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  color: hsl(218 25% 25%);
  white-space: nowrap;
  letter-spacing: .02em;
  text-transform: uppercase;
  opacity: 0;
  animation: bar-label-in 300ms ease-out forwards;
  animation-delay: inherit;
}
@keyframes bar-label-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* ----- Floating metric cards (foreground) ----- */
.why-proof-cards {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.why-proof-card {
  position: absolute;
  background: #fff;
  border-radius: 14px;
  box-shadow:
    0 20px 40px -16px rgb(15 23 42 / .18),
    0 6px 14px -6px rgb(15 23 42 / .08),
    0 0 0 1px hsl(218 25% 88%);
  padding: 16px 22px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
  min-width: 350px;
  opacity: 0;
  transform: translateX(40px) scale(.94);
}
.why-proof.is-visible .why-proof-card {
  animation: card-in 700ms cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes card-in {
  0%   { opacity: 0; transform: translateX(40px) scale(.94); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

/* Stagger the 3 cards diagonally */
.why-proof-card:nth-child(1) { top:  10%; left: 10%; }
.why-proof-card:nth-child(2) { top:  42%; left: 18%; }
.why-proof-card:nth-child(3) { top:  74%; left: 6%;  }

@media (max-width: 1280px) {
  .why-proof-card { min-width: 300px; padding: 12px 16px; gap: 14px; }
}
@media (max-width: 560px) {
  .why-proof-card { min-width: 260px; }
  .why-proof-card:nth-child(1) { left: 6%; }
  .why-proof-card:nth-child(2) { left: 10%; }
  .why-proof-card:nth-child(3) { left: 2%; }
}

.why-proof-card-num {
  font-family: var(--font-display, var(--font-sans));
  font-size: clamp(32px, 3.8vw, 44px);
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1;
  color: hsl(218 70% 14%);
  font-variant-numeric: tabular-nums;
}

.why-proof-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.why-proof-card-label {
  font-size: 13px;
  line-height: 1.3;
  color: hsl(220 9% 38%);
  font-weight: 500;
}

/* Gradient bar: red -> yellow -> green */
.why-proof-card-bar {
  width: 100%;
  height: 8px;
  background: hsl(218 25% 92%);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.why-proof-card-bar-fill {
  position: absolute;
  inset: 0;
  width: 0;
  background: linear-gradient(to right,
    hsl(0 80% 60%) 0%,
    hsl(35 90% 58%) 35%,
    hsl(55 90% 55%) 55%,
    hsl(120 65% 50%) 100%);
  border-radius: 999px;
}
.why-proof.is-visible .why-proof-card-bar-fill {
  animation: bar-fill 1000ms cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes bar-fill {
  0%   { width: 0; }
  100% { width: var(--target, 0%); }
}

/* Reduced motion: skip all animation, show end state */
@media (prefers-reduced-motion: reduce) {
  .why-proof-gantt-bar,
  .why-proof-card,
  .why-proof-card-bar-fill {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .why-proof-gantt-bar { transform: scaleX(1) !important; }
  .why-proof-card-bar-fill { width: var(--target, 0%) !important; }
}

/* Dark-mode override (style-remix / style-contrast): tint blob darker */
body.style-remix .why-proof-blob,
body.style-contrast .why-proof-blob {
  background: linear-gradient(135deg,
    hsl(218 40% 22%) 0%,
    hsl(218 50% 28%) 50%,
    hsl(218 45% 24%) 100%);
  opacity: .9;
}
body.style-remix .why-proof-gantt-bar,
body.style-contrast .why-proof-gantt-bar {
  background: hsl(218 20% 40% / .8);
}
body.style-remix .why-proof-gantt-bar-label,
body.style-contrast .why-proof-gantt-bar-label {
  color: hsl(218 30% 85%);
}
body.style-remix .why-proof-gantt-day,
body.style-contrast .why-proof-gantt-day {
  color: hsl(218 20% 70%);
}
body.style-remix .why-proof-card,
body.style-contrast .why-proof-card {
  background: hsl(218 30% 10%);
  box-shadow:
    0 20px 40px -16px rgb(0 0 0 / .5),
    0 6px 14px -6px rgb(0 0 0 / .35),
    0 0 0 1px hsl(218 25% 22%);
}
body.style-remix .why-proof-card-num,
body.style-contrast .why-proof-card-num { color: #fff; }
body.style-remix .why-proof-card-label,
body.style-contrast .why-proof-card-label { color: hsl(218 18% 70%); }
body.style-remix .why-proof-card-bar,
body.style-contrast .why-proof-card-bar { background: hsl(218 25% 18%); }