/* Stop Re-Explaining: page-scoped design.
   Inherits Spline Sans / Piazzolla and site tokens from typography.css,
   colors.css, and spacing.css. Only page-unique styles live here. */

.sre {
  --sre-radius: 18px;
  color: var(--color-text);
}

/* Hero word flip: line one cycles through the three pains.
   Words share one inline-grid cell so the line width never shifts;
   the full sentence lives in a sibling .sr-only span for AT and SEO. */
.sre-flip {
  display: inline-grid;
  justify-items: center;
  perspective: 600px;
}

.sre-flip-word {
  grid-area: 1 / 1;
  opacity: 0;
  transform: rotateX(-90deg);
  transition: transform 0.45s ease, opacity 0.45s ease;
  backface-visibility: hidden;
}

.sre-flip-word.is-active {
  opacity: 1;
  transform: rotateX(0deg);
}

.sre-flip-word.is-leaving {
  opacity: 0;
  transform: rotateX(90deg);
}

.sre-section { padding: var(--space-3xl) 0; }
.sre-section.sre-alt {
  background: var(--color-background-subtle);
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
}

.sre-section h2 {
  margin-bottom: var(--space-xl);
}

.sre-lede {
  max-width: 720px;
  margin: calc(-1 * var(--space-md)) auto var(--space-2xl);
  text-align: center;
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
}

.sre-lede a { color: var(--color-accent-dark); }

/* Demo video: shared full-bleed .hero-image-wrapper player
   (components.css + sections.css), same as the homepage. */
.sre .hero-image-wrapper {
  margin-top: var(--space-2xl);
}

/* Video is the hero's last element: sit flush against the stats section. */
.sre .hero {
  padding-bottom: 0;
}

/* Alignment-tax cards */
.sre-taxes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  max-width: 900px;
  margin: 0 auto;
}

.sre-card {
  background: var(--color-background);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--sre-radius);
  padding: var(--space-xl) var(--space-lg);
}

.sre-card h3 {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-xl);
}

.sre-card p {
  margin: 0;
  color: var(--color-text-secondary);
}

/* Proof stats */
.sre-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.sre-stat {
  background: var(--color-background);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--sre-radius);
  padding: var(--space-xl) var(--space-lg);
}

.sre-stat-num {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-4-5xl);
  color: var(--color-cta-background);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.sre-stat-title {
  font-family: var(--font-family-headers);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-black);
  color: var(--color-text);
  margin: var(--space-sm) 0 var(--space-xs);
}

.sre-stat p:not(.sre-stat-title) {
  margin: 0;
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
}

@media (max-width: 900px) {
  .sre-stats { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .sre-taxes { grid-template-columns: 1fr; }
}