/* Customer stories: /customers/ pages, the homepage story strip and the small-business landing page. */

.story-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.25rem, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.story-stats li {
  display: grid;
  gap: 0.3rem;
  align-content: start;
  min-width: 0;
  padding: 1rem 1.05rem;
  border: 1px solid color-mix(in srgb, var(--rl-border-soft, #ead9c7) 80%, white);
  border-radius: 1rem;
  background: color-mix(in srgb, white 92%, var(--rl-color-cream-200, #fff0de));
}

.story-stats strong {
  color: var(--rl-color-teal-900, #0f2d32);
  font-family: var(--rl-font-heading, inherit);
  font-size: clamp(1.55rem, 2.8vw, 2.15rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

.story-stats span {
  color: var(--rl-text-muted, #4c5a5f);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.4;
}

.story-note {
  margin: 0;
  color: var(--rl-text-muted, #4c5a5f);
  font-size: 0.8rem;
  line-height: 1.55;
}

/* Homepage and landing-page strip */
.story-proof {
  display: grid;
  grid-template-columns: minmax(0, 14.5rem) minmax(0, 1fr);
  gap: clamp(1.25rem, 3.5vw, 3rem);
  align-items: center;
  padding: clamp(1.25rem, 3.2vw, 2.4rem);
  border: 1px solid color-mix(in srgb, var(--rl-color-teal-900, #0f2d32) 13%, white);
  border-radius: clamp(1.25rem, 2.6vw, 2rem);
  background:
    radial-gradient(circle at 96% 8%, color-mix(in srgb, var(--rl-color-orange-500, #f4ab4b) 20%, transparent), transparent 38%),
    color-mix(in srgb, white 94%, var(--rl-color-cream-200, #fff0de));
  box-shadow: 0 18px 40px rgba(15, 45, 50, 0.08);
}

.story-proof__media {
  display: block;
  margin: 0;
  padding: 0.35rem;
}

.story-proof__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.85rem;
  box-shadow: 0 16px 34px rgba(15, 45, 50, 0.16);
  transform: rotate(-2.5deg);
}

.story-proof__body {
  display: grid;
  gap: 0.95rem;
  min-width: 0;
}

.story-proof__body > * {
  margin: 0;
}

.story-proof__body h2 {
  max-width: 24ch;
  text-wrap: balance;
}

.story-proof__lede {
  max-width: 54ch;
  line-height: 1.6;
}

.story-proof__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}

.story-proof__footer .story-note {
  flex: 1 1 16rem;
}

/* Story pages */
.story-visual {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(21rem, 40vw, 29rem);
  margin: 0;
}

.story-visual__poster {
  width: min(64%, 17.5rem);
  margin-left: 6%;
  border-radius: 1rem;
  box-shadow: 0 26px 52px rgba(15, 45, 50, 0.2);
  transform: rotate(-4deg);
}

.story-visual__phone {
  position: absolute;
  right: 4%;
  bottom: 0;
  width: min(40%, 11.25rem);
  transform: rotate(3deg);
}

.story-visual__phone img {
  display: block;
  width: 100%;
  height: auto;
}

.story-visual figcaption {
  position: absolute;
  left: 6%;
  bottom: -0.25rem;
  color: var(--rl-text-caption, #314a51);
  font-size: 0.8rem;
  font-weight: 700;
}

.story-section-head {
  display: grid;
  gap: 0.6rem;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.story-section-head > * {
  margin: 0;
}

.story-section-head p:not(.section-label) {
  max-width: 62ch;
  color: #2e3e43;
  line-height: 1.65;
}

.story-results {
  display: grid;
  gap: 1rem;
}

.story-highlight {
  margin: 0;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--rl-color-orange-500, #f4ab4b);
  border-radius: 0 0.85rem 0.85rem 0;
  background: color-mix(in srgb, var(--rl-color-orange-500, #f4ab4b) 10%, white);
  color: var(--rl-color-teal-900, #0f2d32);
  font-weight: 800;
}

.story-card {
  align-self: stretch;
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.6rem);
}

.story-card__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
  box-shadow: 0 12px 26px rgba(15, 45, 50, 0.14);
}

.story-card__body {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
}

.story-card__body > * {
  margin: 0;
}

.story-card__meta {
  color: var(--rl-text-muted, #4c5a5f);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.story-card__link {
  font-weight: 850;
}

@media (max-width: 860px) {
  .story-visual {
    width: min(100%, 30rem);
    margin-inline: auto;
  }
}

@media (max-width: 760px) {
  .story-proof {
    grid-template-columns: minmax(0, 1fr);
  }

  .story-proof__media {
    width: min(58%, 13rem);
    margin-inline: auto;
  }
}

@media (max-width: 520px) {
  .story-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .story-card__media {
    width: min(55%, 10rem);
  }

  .story-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .story-stats li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* Real photos from a customer's shop (Buna Beans story). */
.story-photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.9rem, 2.4vw, 1.5rem);
  max-width: 760px;
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
}

.story-photos figure {
  display: grid;
  gap: 0.55rem;
  margin: 0;
}

.story-photos img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 22px;
  box-shadow: 0 18px 38px rgba(16, 45, 50, 0.14);
}

.story-photos figcaption {
  color: var(--rl-text-muted, #4c5a5f);
  font-size: 0.95rem;
  line-height: 1.45;
}

@media (max-width: 520px) {
  .story-photos img {
    border-radius: 16px;
  }

  .story-photos figcaption {
    font-size: 0.85rem;
  }
}