/* The SkyHarbour preview card on the homepage. */
.feature-preview{position:relative}
.work-booking.feature-preview{position:absolute;isolation:isolate;border-radius:6px}
.work-booking.feature-preview::before{content:"";position:absolute;inset:-5px;z-index:-1;pointer-events:none;border-radius:12px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 70%,transparent),color-mix(in srgb,var(--accent) 33%,transparent) 55%,color-mix(in srgb,var(--accent) 50%,transparent));filter:blur(7px);opacity:.55;transition:opacity .22s ease,inset .22s ease,filter .22s ease}
.work-booking.feature-preview:is(:hover,:focus-visible)::before{inset:-10px;filter:blur(10px);opacity:.95}
@media(prefers-reduced-motion:reduce){.work-booking.feature-preview::before{transition:none}}
.feature-preview .feature-preview-label{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:14px;min-height:38px;padding:8px 14px;border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);border-radius:3px;background:var(--label-bg);color:var(--text);font-size:12px;line-height:1.4;box-shadow:0 3px 12px #0002}
.feature-preview:hover .feature-preview-label{background:var(--panel);color:var(--text);border-color:color-mix(in srgb,var(--accent) 48%,transparent)}
.feature-preview:focus-visible,.project-try:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.work-booking .feature-preview-label{right:10px;bottom:10px;min-height:36px;padding:7px 12px;font-size:12px;gap:9px;white-space:nowrap;border-color:color-mix(in srgb,var(--accent) 60%,transparent);background:var(--label-bg);color:var(--text);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 8%,transparent),0 0 15px color-mix(in srgb,var(--accent) 15%,transparent),0 3px 12px #0003}
.work-booking.feature-preview:is(:hover,:focus-visible) .feature-preview-label{background:var(--panel);border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent),0 0 18px color-mix(in srgb,var(--accent) 22%,transparent),0 3px 12px #0003}
.work-booking .feature-demo-cue{position:absolute;right:calc(100% - 19px);top:calc(100% + 1px);width:34px;height:26px;pointer-events:none;color:var(--muted)}
.work-booking .feature-demo-cue>span{position:absolute;right:calc(100% + 5px);top:14px;white-space:nowrap;font-size:10px;font-weight:500;line-height:1.4;letter-spacing:.06em}
.work-booking .feature-demo-pointer{display:block;width:34px;height:26px;overflow:visible;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.project-try{margin-top:25px;color:var(--accent)}
@media(max-width:600px){.feature-preview .feature-preview-label{right:10px;bottom:10px}.work-booking .feature-preview-label{right:6px;bottom:6px;font-size:10px;padding:6px 9px;min-height:34px}}
@media(prefers-contrast:more){.work-booking.feature-preview{outline:1px solid var(--accent);outline-offset:4px}.feature-preview .feature-preview-label{border-color:var(--accent)}}
