/* Homepage: a feed that plays. Each card carries a brand behaviour. */
html, body { overflow-x: clip; }
main { overflow-x: clip; }
.stage { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: clamp(20px, 4vw, 64px);
  width: min(100%, 1536px); margin-inline: auto; padding: clamp(12px, 2vw, 28px) var(--gutter) clamp(28px, 4vw, 56px); min-height: calc(100svh - 64px); }
.pitch .eyebrow { margin: 0 0 clamp(16px, 2vw, 28px); }
.belief { margin: 0; font-weight: 500; font-size: clamp(38px, 5.2vw, 82px); line-height: .92; letter-spacing: -.07em; }
.belief > span { display: block; padding-bottom: .16em; }
.belief .w { color: #16161b47; transition: color .6s var(--ease); }
.belief .tail { white-space: nowrap; }
.belief .world-line { color: var(--red); }
[data-kind="faces"] .belief [data-w="faces"], [data-kind="songs"] .belief [data-w="songs"], [data-kind="stories"] .belief [data-w="stories"] { color: var(--ink); }
.descriptor { margin: clamp(10px, 1.4vw, 20px) 0 0; font-weight: 500; font-size: clamp(18px, 1.7vw, 26px); line-height: 1.15; letter-spacing: -.035em; }
/* The left card overlaps the headline column when the phone is tall and the window narrow */
@media (max-width: 1300px), (max-width: 1420px) and (min-height: 880px) { .peek.left { display: none; } }
.frame img.avatar { display: none; }
.who .dot { width: 34px; height: 34px; flex: none; }
.who .dot.logo { background-color: #fff; background-size: cover; background-position: center; box-shadow: 0 0 0 1px #ffffff59; }
.pitch-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: clamp(18px, 2.4vw, 34px); }
.pitch-foot .pill { background: var(--ink); color: var(--white); }
.pitch-foot .pill:hover { background: var(--red); }
.pitch-foot .pill.ghost { background: transparent; color: var(--ink); }
.pitch-foot .pill.ghost:hover { background: var(--ink); color: var(--white); }
.now { margin: clamp(18px, 2.2vw, 30px) 0 0; font: 11px var(--mono); text-transform: uppercase; color: var(--muted); }
.now b { font-weight: 500; color: var(--ink); }

.feed { position: relative; display: grid; place-items: center; perspective: 1400px; }
.phone { position: relative; z-index: 2; height: min(76svh, 720px); aspect-ratio: 9 / 16; max-width: 100%; overflow: hidden; border-radius: 30px;
  background: var(--dark); color: #fff; box-shadow: 0 30px 80px #2a1f3a40, 0 0 0 1px #ffffff40; isolation: isolate; --hold: 5200ms; }
.frame { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; }
.frame.on { opacity: 1; }
.frame img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); }
.frame.on img { animation: drift var(--hold) linear both; }
.paused .frame.on img, .paused .bar.on i { animation-play-state: paused; }
@keyframes drift { from { transform: scale(1.02); } to { transform: scale(1.12) translateY(-1.5%); } }
.phone::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(#0d0d1099, transparent 22%, transparent 42%, #0d0d10eb 88%); }
.bars { position: absolute; z-index: 3; top: 14px; left: 14px; right: 14px; display: flex; gap: 4px; }
.bar { flex: 1; height: 2.5px; border-radius: 2px; background: #ffffff55; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: #fff; }
.bar.done i { width: 100%; }
.bar.on i { animation: fill var(--hold) linear both; }
@keyframes fill { from { width: 0; } to { width: 100%; } }
.who { position: absolute; z-index: 3; top: 30px; left: 16px; right: 16px; display: flex; align-items: center; gap: 9px; font: 11px var(--mono); text-transform: uppercase; }
.who .dot { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--paper); color: var(--ink); font: 600 13px var(--sans); }
.who .kind { margin-left: auto; padding: 5px 9px; border: 1px solid #ffffff8c; border-radius: 999px; font-size: 10px; }
.cap { position: absolute; z-index: 3; left: 18px; right: 18px; bottom: 20px; pointer-events: none; }
.cap h2 { margin: 0 0 12px; max-width: 9.5em; font-weight: 500; font-size: clamp(30px, 3vw, 44px); line-height: .94; letter-spacing: -.06em; }
.cap h2.swap { animation: line-in .7s var(--ease) both; }
@keyframes line-in { from { opacity: 0; translate: 0 14px; filter: blur(6px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
.cap p { margin: 0 62px 12px 0; font: 11px/1.4 var(--mono); text-transform: uppercase; color: #e6e0ea; }
.watch { pointer-events: auto; display: inline-flex; gap: 8px; padding: 10px 14px; border: 1px solid #ffffffa6; border-radius: 999px; font: 500 11px/1 var(--mono); text-transform: uppercase; color: #fff; transition: background .2s, color .2s, border-color .2s; }
.watch:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.tap { position: absolute; z-index: 2; top: 0; bottom: 0; width: 50%; border: 0; background: none; cursor: pointer; }
.tap.prev { left: 0; } .tap.next { right: 0; }
.toggle { position: absolute; z-index: 4; right: 16px; bottom: 18px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--paper); color: var(--ink); cursor: pointer; font: 14px/1 var(--sans); transition: background .2s, color .2s; }
.toggle:hover { background: var(--red); color: #fff; }
.peek { position: absolute; z-index: 1; top: 50%; height: min(60svh, 560px); aspect-ratio: 9 / 16; overflow: hidden; border-radius: 24px; opacity: .55; filter: saturate(.8); transition: opacity .4s; cursor: pointer; border: 0; padding: 0; background: var(--dark); }
.peek:hover { opacity: .85; }
.peek img { display: block; width: 100%; height: 100%; object-fit: cover; }
.peek.left { left: 50%; transform: translate(-128%, -50%) rotateY(24deg); }
.peek.right { left: 50%; transform: translate(28%, -50%) rotateY(-24deg); }

.why { padding-block: clamp(40px, 7vw, 110px); }
.why p.big { max-width: 22ch; font-size: clamp(30px, 4.4vw, 68px); line-height: .98; letter-spacing: -.06em; }
.section-foot { margin: clamp(16px, 2vw, 26px) 0 0; }
.home-work .capabilities { margin-top: clamp(20px, 3vw, 36px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-products-head { margin-bottom: clamp(20px, 3vw, 36px); }

@media (max-width: 900px) {
  .stage { grid-template-columns: 1fr; min-height: 0; gap: 22px; }
  .belief { font-size: clamp(34px, 9.6vw, 64px); }
  .phone { height: auto; width: min(100%, 420px); }
  .peek { display: none; }
}
@media (max-width: 760px) { .home-work .capabilities { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .frame.on img, .bar.on i, .cap h2.swap { animation: none; } .bar.on i { width: 100%; } }