/* Founder profile above a quote/metrics column and a visible problem list. */
.testimonial-stories { display: grid; gap: 24px; }
.testimonial-story { min-height: 360px; padding: 24px; border-radius: 24px; background: #f7f7f7; color: #18181b; }
.story-testimonial { display: flex; flex-direction: column; gap: 32px; margin: 0; }
.founder-profile { display: flex; align-items: center; gap: 16px; min-width: 0; }
.founder-profile > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.founder-avatar { object-fit: cover; flex: 0 0 48px; width: 48px; height: 48px; overflow: hidden; border-radius: 8px; background: #e7e7e7; }
.founder-name, .founder-role { margin: 0; font-size: var(--text-base); line-height: 150%; letter-spacing: -.36px; }
.founder-name { font-weight: 500; }
.founder-role { color: #525252; }
.story-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
.story-quote-and-facts { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.story-testimonial blockquote, .story-testimonial blockquote p { margin: 0; }
.story-testimonial blockquote, .story-summary { font-size: var(--text-xl); line-height: 150%; font-weight: 400; letter-spacing: -.75px; text-wrap: pretty; }
.story-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: 100%; max-width: 448px; margin: 0; }
.story-facts > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; min-width: 0; padding-left: 16px; border-left: 1px solid #d4d4d4; }
.story-facts dt { color: #525252; font-size: var(--text-sm); line-height: 150%; letter-spacing: -.02em; }
.story-facts dd { margin: 0; font-size: var(--text-xl); line-height: 130%; font-weight: 500; letter-spacing: -.9px; }
.story-outcomes { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.story-outcomes li { display: flex; align-items: flex-start; gap: 12px; min-height: 28px; color: #525252; font-size: var(--text-base); line-height: 150%; letter-spacing: -.36px; }
.story-outcomes svg { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 2px; }
.story-outcomes span { min-width: 0; }

@media (max-width: 479px) {
  .story-facts { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 640px) {
  .testimonial-story { min-height: 360px; padding: 32px; }
  .story-facts { gap: 32px; }
}
@media (min-width: 768px) {
  .testimonial-stories { gap: 32px; }
  .story-facts > div { min-height: 80px; }
  .story-facts dt { font-size: var(--text-base); line-height: 150%; }
  .story-facts dd { font-size: var(--text-2xl); line-height: 130%; }
}
@media (min-width: 1024px) {
  .story-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
  .story-quote-and-facts { gap: 72px; }
}

.story-facts[hidden] { display: none; }

.company-link { display: inline-flex; align-items: baseline; gap: 4px; text-underline-offset: 3px; }
.company-link svg { width: 16px; height: 16px; flex-shrink: 0; align-self: center; }
.company-link:hover, .company-link:focus-visible { text-decoration: underline; }

/* Long quotes show a few lines first. "View more" opens the full quote and it stays open. */
.story-testimonial blockquote p + p { margin-top: 1em; }
.story-testimonial blockquote.is-clamped { max-height: calc(1.5em * 4); overflow: hidden; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.story-more { align-self: flex-start; margin-top: -24px; padding: 0; border: 0; background: none; color: #0073ff; font: inherit; font-size: var(--text-base); line-height: 150%; letter-spacing: -.36px; cursor: pointer; }
.story-more:hover, .story-more:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* Screenshot of the client's message: shown on hover, or with the button on touch screens. */
.testimonial-story { position: relative; }
.story-shot-toggle { position: absolute; top: 38px; right: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid #e0e0e0; border-radius: 999px; background: #fff; color: #525252; font: inherit; font-size: var(--text-sm); line-height: 150%; letter-spacing: -.02em; cursor: pointer; }
.story-shot-toggle svg { width: 16px; height: 16px; flex-shrink: 0; }
.story-shot-toggle:hover, .story-shot-toggle:focus-visible { color: #18181b; border-color: #c4c4c4; }
.story-shot { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgb(0 0 0 / .6); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s; }
.story-shot img { display: block; width: auto; max-width: min(400px, 100%); height: auto; max-height: 86svh; border-radius: 16px; box-shadow: 0 24px 60px rgb(0 0 0 / .3); transform: translateY(8px) scale(.98); transition: transform .2s ease; }
.testimonial-story.is-shot-open .story-shot { opacity: 1; visibility: visible; }
.testimonial-story.is-shot-open .story-shot img { transform: none; }

@media (min-width: 1024px) {
  .story-more { margin-top: -64px; }
}
/* The button comes last in the card, so keyboard order matches the phone layout. Wider screens show it at the top right. */
@media (min-width: 640px) {
  .testimonial-story:has(.story-shot-toggle) .founder-profile { padding-right: 180px; }
}
/* Phones: the button sits at the bottom of the card. */
@media (max-width: 639px) {
  .testimonial-story:has(.story-shot-toggle) { padding-bottom: 88px; }
  .story-shot-toggle { top: auto; right: auto; bottom: 24px; left: 24px; }
}
@media (hover: hover) and (pointer: fine) {
  /* A hover card below the profile row. A tall screenshot may extend past the bottom of the card. */
  .story-shot { position: absolute; inset: 112px 32px auto auto; padding: 0; background: none; pointer-events: none; }
  .story-shot img { width: 320px; max-width: none; max-height: none; }
  .testimonial-story:hover .story-shot { opacity: 1; visibility: visible; }
  .testimonial-story:hover .story-shot img { transform: none; }
}
/* Two columns: the screenshot takes the place of the outcome list. */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .story-shot { inset: 112px auto auto 75%; transform: translateX(-50%); }
  .story-outcomes { transition: opacity .2s ease; }
  .testimonial-story:has(.story-shot):hover .story-outcomes, .testimonial-story.is-shot-open .story-outcomes { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .story-shot, .story-shot img { transition: none; }
}