/* Interactive Figma-sourced App Clip story, scoped to the homepage Hero. */
.clip-first-hero{grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr)}
.clip-hero-visual{padding:0!important;display:flex;justify-content:center;min-width:0}
.clip-demo{width:min(100%,470px);padding:16px 24px 13px;border:1px solid #dce4f3;border-radius:32px;background:radial-gradient(circle at 50% 0,#e8efff,#f8faff 58%,#f7f9fd);box-shadow:0 24px 60px #2b407319;text-align:center}
.clip-demo-eyebrow{font-size:12px;font-weight:700;letter-spacing:.025em;color:#4e5fe4;margin:0 0 2px;line-height:1.5}
.clip-demo-prompt{min-height:30px;font-size:11px;color:#63728a;margin:0 0 9px;line-height:1.5}
.clip-demo-phone{width:min(100%,325px);margin:0 auto;box-shadow:inset 0 0 0 1px #898b90,inset 0 0 0 3px #292b30,0 20px 42px #15234032}
.clip-demo-phone.clip-demo-device-nfc{width:min(100%,270px)}
.clip-demo-phone .iphone16-display{aspect-ratio:393/852}
.clip-demo-phone .dynamic-island{z-index:8;top:1.2%;height:3%;width:27%}
.clip-demo-display{position:relative;width:100%;height:100%;overflow:hidden;background:#f9fbff}
.clip-demo-display>img:first-child{display:block;width:100%;height:100%;object-fit:fill;user-select:none}
.clip-demo-system-card{position:absolute;z-index:4;left:3%;right:3%;bottom:3%;overflow:hidden;border-radius:22px;background:#fff;box-shadow:0 16px 38px #10192f62;text-align:left;color:#16171b}
.clip-demo-system-art{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.clip-demo-system-body{padding:10px 14px 12px}
.clip-demo-system-label{display:block;margin-bottom:6px;color:#6c7480;font-size:9px;font-weight:750;letter-spacing:.1em}
.clip-demo-system-row{display:flex;align-items:center;justify-content:space-between;gap:7px}
.clip-demo-system-row>div{min-width:0}.clip-demo-system-row strong,.clip-demo-system-row span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clip-demo-system-row strong{font-size:15px;line-height:1.2}.clip-demo-system-row span{font-size:10px;color:#646c79;margin-top:3px}
.clip-demo-open{flex:none;border:0;border-radius:99px;background:#4164de;color:#fff;padding:8px 15px;font-size:12px;font-weight:700;cursor:pointer}.clip-demo-open:focus-visible{outline:3px solid #1d49fa;outline-offset:2px}
.clip-demo-hotspot{position:absolute;z-index:3;display:block;min-height:0;padding:0;background:transparent;border:2px solid transparent;border-radius:14px;cursor:pointer;touch-action:manipulation}
.clip-demo-hotspot:after{content:'';position:absolute;inset:-3px;border:2px solid #7591ffb8;border-radius:inherit;box-shadow:0 0 0 4px #7591ff16;animation:clip-hotspot 2s ease-in-out infinite}
.clip-demo-hotspot:hover:after,.clip-demo-hotspot:focus-visible:after{border-color:#1d49fa;box-shadow:0 0 0 5px #335be931;animation:none}
.clip-demo-hotspot:focus-visible{outline:3px solid #214be0;outline-offset:3px}
.clip-demo-nfc-cancel{position:absolute;z-index:9;left:8%;top:89%;width:84%;height:7%;padding:0;border:0;border-radius:999px;background:transparent;cursor:pointer;touch-action:manipulation}.clip-demo-nfc-cancel:focus-visible{outline:3px solid #214be0;outline-offset:2px}
.clip-demo-physical-card{position:absolute;z-index:12;left:50%;top:0;width:73%;height:auto;filter:drop-shadow(0 10px 12px #1428466b);transform-origin:center;animation:clip-card-move 5s ease-in-out both;pointer-events:none}
.clip-demo-external-rings{position:absolute;z-index:13;left:50%;top:0;width:18%;aspect-ratio:1;border:2px solid #278affb8;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 12px #278aff34,0 0 0 24px #278aff19;animation:clip-nfc-pulse 1.15s ease-in-out infinite alternate;pointer-events:none}
.clip-demo-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px auto 0;max-width:325px;color:#4d5fe7;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}.clip-demo-footer>div{display:flex;gap:8px}.clip-demo-minor{min-height:32px;padding:4px 7px;border:0;background:transparent;color:#4054c8;font-size:11px}.clip-demo-minor:disabled{opacity:.35}.clip-demo-disclaimer{font-size:10px;line-height:1.55;margin:7px 0 0;color:#738198}
@keyframes clip-appear{from{opacity:.4;transform:translateX(10px)}to{opacity:1;transform:none}}@keyframes clip-hotspot{50%{opacity:.32;transform:scale(1.025)}}@keyframes clip-card-move{0%{transform:translate(8%,245%) rotate(-16deg);opacity:.65}35%{opacity:1}60%,100%{transform:translate(-50%,-100%) rotate(-4deg);opacity:1}}@keyframes clip-nfc-pulse{to{opacity:.35;transform:translate(-50%,-50%) scale(1.23)}}
@media(max-width:760px){.clip-first-hero{grid-template-columns:1fr}.clip-hero-visual{max-width:420px;width:100%;margin:10px auto 0}.clip-demo{padding:15px 12px 11px;border-radius:25px}.clip-demo-phone{width:min(100%,310px)}.clip-demo-footer{max-width:310px}.clip-demo-eyebrow{font-size:11px}}
@media(max-width:350px){.clip-demo-phone{width:min(100%,255px)}.clip-demo{padding:12px 8px}}
@media(prefers-reduced-motion:reduce){.clip-demo-display>img:first-child,.clip-demo-hotspot:after,.clip-demo-physical-card,.clip-demo-external-rings{animation:none!important}.clip-demo-physical-card{transform:translate(-50%,-100%) rotate(-4deg)}}