/* Company stories: the approved card exploration, on the homepage's neutral ground. */
.page-homepage .hp-videos__inner { gap: 32px; }
.page-homepage .hp-videos__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }
.page-homepage .hp-videos__heading { display: flex; flex-direction: column; gap: 14px; }
.page-homepage .hp-videos__header .head-title { max-width: none; }
.page-homepage .hp-videos__intro { max-width: 280px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.page-homepage .hp-videos__intro > p { font-size: 15px; line-height: 1.65; color: #626b75; }
.page-homepage .hp-story-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.page-homepage .hp-story-card { display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid var(--color-hairline); color: #1b242c; text-decoration: none; }
.page-homepage .hp-story-brand-field { position: relative; overflow: hidden; height: 156px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; background: var(--color-band); border-bottom: 1px solid var(--color-hairline-soft); }
.page-homepage .hp-story-brand-field::before { content: ''; position: absolute; inset: -90px 40px; border: 1px solid #fff; border-radius: 50%; pointer-events: none; }
.page-homepage .hp-story-logo { display: block; width: auto; height: 38px; max-width: 72%; object-fit: contain; position: relative; }
.page-homepage .hp-story-logo--quest { height: 43px; }
.page-homepage .hp-story-logo--microsoft { height: 35px; }
.page-homepage .hp-story-topic { position: relative; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: #626b75; }
.page-homepage .hp-story-copy { padding: 28px; display: flex; flex-direction: column; flex: 1; }
.page-homepage .hp-story-attribution { margin-bottom: 14px; font-size: 12px; line-height: 1.5; color: #626b75; }
.page-homepage .hp-story-copy h3 { font-family: var(--font-display); font-size: 29px; font-weight: 400; line-height: 1.18; letter-spacing: -0.35px; margin-bottom: 16px; }
.page-homepage .hp-story-description { font-size: 14px; line-height: 1.65; color: #626b75; }
.page-homepage .hp-story-footer { margin-top: auto; padding-top: 24px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; color: #4c45c0; }
.page-homepage .hp-story-arrow { flex: none; width: 36px; height: 36px; border: 1px solid var(--color-hairline); border-radius: 50%; display: grid; place-items: center; }
.page-homepage .hp-story-card:hover { border-color: #4c45c0; }
.page-homepage .hp-story-card:hover .hp-story-arrow { background: #4c45c0; border-color: #4c45c0; color: #fff; }
.page-homepage .hp-story-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; padding-top: 28px; border-top: 1px solid var(--color-hairline); }
.page-homepage .hp-story-note { display: grid; grid-template-columns: 142px minmax(0, 1fr); gap: 26px; align-items: center; color: #1b242c; text-decoration: none; }
.page-homepage .hp-story-note-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; }
.page-homepage .hp-story-note-brand .hp-story-logo { height: 22px; max-width: 136px; }
.page-homepage .hp-story-note-brand .hp-story-logo--cnn { height: 34px; }
.page-homepage .hp-story-note-brand > span { font-size: 11px; line-height: 1.5; color: #626b75; }
.page-homepage .hp-story-note .hp-story-attribution { margin-bottom: 8px; }
.page-homepage .hp-story-note h3 { font-family: var(--font-display); font-size: 23px; font-weight: 400; line-height: 1.2; }
.page-homepage .hp-story-note-link { display: inline-flex; align-items: center; gap: 10px; color: #4c45c0; font-size: 14px; font-weight: 500; margin-top: 14px; }
.page-homepage .hp-story-note:hover .hp-story-note-link { text-decoration: underline; text-underline-offset: 4px; }
.page-homepage .hp-videos a:focus-visible { outline: 2px solid #4c45c0; outline-offset: 5px; }
.page-homepage .hp-video-research { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 32px; padding-top: 22px; border-top: 1px solid var(--color-hairline); }
.page-homepage .hp-video-research .eyebrow { font-size: 12px; flex: none; }
.page-homepage .hp-video-research .explore { font-size: 14px; }
@media (max-width: 1100px) {
  .page-homepage .hp-story-copy { padding: 22px; }
  .page-homepage .hp-story-copy h3 { font-size: 25px; }
  .page-homepage .hp-story-note { grid-template-columns: 100px minmax(0, 1fr); gap: 16px; }
  .page-homepage .hp-story-note-brand .hp-story-logo { max-width: 100px; }
}
@media (max-width: 768px) {
  .page-homepage .hp-videos__inner { gap: 28px; }
  .page-homepage .hp-videos__header { flex-direction: column; align-items: stretch; gap: 22px; }
  .page-homepage .hp-videos__intro { max-width: none; }
  .page-homepage .hp-story-grid, .page-homepage .hp-story-notes { grid-template-columns: minmax(0, 1fr); }
  .page-homepage .hp-story-brand-field { height: 132px; }
  .page-homepage .hp-story-copy h3 { font-size: 29px; }
  .page-homepage .hp-video-research { align-items: flex-start; flex-direction: column; gap: 16px; }
  .page-homepage .hp-video-research .explore { white-space: normal; }
}
@media (prefers-reduced-motion: no-preference) {
  .page-homepage .hp-story-card, .page-homepage .hp-story-arrow { transition: border-color 150ms ease, background 150ms ease, color 150ms ease; }
}