/* ── 3. Morphing pill ─────────────────────────────────── */
.s3 { height: 560px; background: var(--gray-60); color: var(--gray-850); }
.pl-page { position: absolute; inset: 0; padding: 112px clamp(18px, 4cqw, 44px) 0; }
.pl-page h3 { margin: 0; max-width: 15ch; font-size: clamp(32px, 6cqw, 72px); line-height: .98; letter-spacing: -0.022em; font-weight: 550; }
.pl-imgs { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 12px; margin-top: 34px; }
.pl-imgs div { height: 190px; border-radius: 6px; }
.pl-imgs div:nth-child(1) { background: linear-gradient(160deg, var(--gray-200) 0%, var(--gray-450) 55%, var(--gray-700) 100%); }
.pl-imgs div:nth-child(2) { background: linear-gradient(200deg, var(--gray-150) 0%, var(--gray-300) 60%, var(--gray-550) 100%); }
.pl-imgs div:nth-child(3) { background: linear-gradient(180deg, var(--gray-200) 0%, var(--gray-450) 60%, var(--gray-700) 100%); }
.pill { position: absolute; top: 20px; left: 50%; z-index: 30; background: var(--gray-900); color: var(--gray-40); overflow: hidden; cursor: default; transform: translateX(-50%); width: 188px; height: 44px; border-radius: 9999px; box-shadow: var(--e2); }
.pl-l { position: absolute; top: 0; left: 50%; opacity: 0; filter: blur(6px); transform: translateX(-50%) scale(.94); transition: opacity .12s ease, filter .12s ease, transform .2s ease; pointer-events: none; }
.pl-l.on { opacity: 1; filter: blur(0); transform: translateX(-50%) scale(1); pointer-events: auto; transition: opacity .26s ease .07s, filter .32s ease .07s, transform .5s cubic-bezier(.2,.9,.25,1) .04s; }
.pl-row { display: flex; align-items: center; gap: 10px; height: 100%; padding: 0 18px; font-size: 13px; white-space: nowrap; }
.pl-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gray-40); flex: none; }
.pl-mute { color: color-mix(in srgb, var(--gray-40) 55%, transparent); }
.pl-mi { display: block; font-size: 32px; line-height: 1.16; font-weight: 550; letter-spacing: -0.022em; opacity: 0; transform: translateY(8px); transition: opacity .1s, transform .1s; }
.pl-l.on .pl-mi { opacity: 1; transform: none; transition: opacity .3s ease calc(var(--d) * 40ms + 120ms), transform .5s cubic-bezier(.2,.9,.25,1) calc(var(--d) * 40ms + 120ms); }
.kbd { font-size: 12px; padding: 2px 7px; border-radius: 6px; background: var(--gray-750); color: color-mix(in srgb, var(--gray-40) 75%, transparent); }
.wave { display: flex; align-items: center; gap: 3px; height: 20px; }
.wave i { width: 3px; border-radius: 2px; background: var(--red-350); height: 4px; }
.rec { width: 9px; height: 9px; border-radius: 50%; background: var(--red-350); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
@container (max-width: 700px) { .pl-imgs { grid-template-columns: 1fr 1fr; } .pl-imgs div:nth-child(3) { display: none; } .pl-imgs div { height: 140px; } }