/* Example reels: a row of silent phone videos, right after the hero. */
.examples { padding: clamp(72px, 9vw, 128px) 0 clamp(64px, 8vw, 112px); border-top: 1px solid var(--line); overflow: hidden; }
.ex-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; gap: clamp(24px, 5vw, 72px); }
.ex-head h2 { font-size: clamp(44px, 5.4vw, 78px); }
.ex-head .lede { padding-bottom: 6px; }

.ex-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(176px, 15.4vw, 214px);
  justify-content: center; gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(40px, 5vw, 64px); padding: 18px max(24px, calc((100% - 1320px) / 2)) 34px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
}
.ex-track::-webkit-scrollbar { display: none; }
.ex-reel { margin: 0; scroll-snap-align: center; }
.ex-reel:nth-child(even) { translate: 0 28px; }
.ex-phone {
  position: relative; aspect-ratio: 9 / 16; overflow: hidden;
  border: 5px solid var(--night); border-radius: 30px; background: #222;
  box-shadow: var(--shadow-card);
  transition: transform 360ms var(--spring), box-shadow 360ms var(--ease);
}
.ex-phone video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ex-phone::after { /* the little speaker notch */
  content: ""; position: absolute; top: 7px; left: 50%; width: 34%; height: 13px; translate: -50% 0;
  border-radius: 99px; background: var(--night);
}
.ex-reel:hover .ex-phone { transform: translateY(-6px) rotate(-1.2deg); box-shadow: 0 1px 1px rgb(20 20 20 / .05), 0 24px 40px -14px rgb(20 20 20 / .25), 0 50px 90px -40px rgb(20 20 20 / .35); }
.ex-reel figcaption { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; color: var(--ink-2); font-size: 14px; font-weight: 500; letter-spacing: -.01em; }
.ex-kind { padding: 4px 10px; border-radius: 99px; background: var(--bg); color: var(--fg); font-size: 12.5px; font-weight: 650; }

.ex-formats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: clamp(28px, 3vw, 40px) 0 0; padding: 0; list-style: none; }
.ex-formats li { padding: 10px 16px; border: 1px solid var(--line); border-radius: 99px; background: var(--paper); color: var(--ink); font-size: 14.5px; font-weight: 550; letter-spacing: -.01em; }
.ex-formats li:last-child { border-color: var(--ink); background: var(--ink); color: #fff; }
.ex-note { max-width: 46em; margin: 20px auto 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; text-align: center; }

/* Phones rise in one after another as the row comes into view. */
.js .ex-reel { opacity: 0; transform: translateY(40px); transition: opacity 600ms var(--ease), transform 700ms var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.js .ex-track.is-in .ex-reel { opacity: 1; transform: none; }

@media (max-width: 1100px) {
  .ex-track { justify-content: start; }
}
@media (max-width: 760px) {
  .ex-head { grid-template-columns: minmax(0, 1fr); }
  .ex-head h2 { font-size: clamp(36px, 9.6vw, 56px); }
  .ex-track { grid-auto-columns: 58vw; padding-inline: 16px; scroll-padding-inline: 16px; }
  .ex-reel { scroll-snap-align: start; }
  .ex-reel:nth-child(even) { translate: none; }
  .ex-formats { justify-content: flex-start; gap: 8px; }
  .ex-formats li { padding: 8px 13px; font-size: 13.5px; }
  .ex-note { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .js .ex-reel { opacity: 1; transform: none; transition: none; }
  .ex-phone { transition: none; }
}