/* A separate usage demo: the product photos in the hero stay still. */
.band-wifi-section{padding-top:12px;padding-bottom:65px;scroll-margin-top:95px}
.band-wifi-story{grid-template-columns:1.2fr 1fr;gap:48px;padding:28px 38px;margin:0;background:var(--synkro-oxford)}
.band-wifi-story .nfc-story-scene{container-type:inline-size;height:460px;max-width:540px}
.band-demo-photo{position:absolute;left:0;top:20px;width:60%;aspect-ratio:1;border-radius:22px;overflow:hidden;background:#212521}
.band-demo-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 57%;display:block}
.band-demo-photo:after{content:"PULSERA SYNKRO";position:absolute;left:14px;bottom:13px;font-size:8px;letter-spacing:.12em;padding:6px 9px;border-radius:15px;color:#fff;background:#090b09bf}
.band-wifi-story .nfc-phone{right:0;top:20px;width:150px;height:290px;transform:rotate(6deg);border-width:3px;z-index:2}
.band-wifi-story .nfc-waves{left:calc(30% - 32px);top:calc(30cqw - 12px);width:64px;height:64px;z-index:1}
.band-wifi-story .nfc-phone-date{font-size:9px}
.band-wifi-story .nfc-notice{top:102px;font-size:10px;padding:12px 8px}
.band-wifi-story .nfc-notice b{font-size:10px;margin-bottom:5px}
.band-wifi-story .nfc-notice span{font-size:9px;line-height:1.5}
.band-wifi-story .nfc-notice:after{content:"";position:absolute;right:20px;bottom:10px;width:22px;height:22px;border:1px solid var(--synkro-green);border-radius:50%;background:rgb(199 244 3 / .16);opacity:0}
.band-wifi-story .nfc-destination{inset:35px 8px 12px;gap:7px;padding:6px}
.band-wifi-story .band-wifi-icon{width:36px;height:36px;flex-shrink:0;color:var(--synkro-green);margin:0}
.band-wifi-story .nfc-destination b{font-size:15px;font-family:var(--font-body);font-weight:500}
.band-wifi-story .nfc-destination small{font-size:10px;line-height:1.5}
.band-wifi-network{width:100%;padding:8px 4px;border-block:1px solid var(--line);margin:3px 0}
.band-wifi-network strong{display:block;font-size:11px;font-weight:500;color:white}
.band-wifi-network small{display:block;color:var(--synkro-gray);margin-top:4px}
.band-wifi-story .nfc-destination .band-wifi-connect{display:block;width:100%;padding:9px 5px;border-radius:7px;font-size:11px}
.band-wifi-story .nfc-destination .band-wifi-example{font-size:8px;margin-top:4px}
.band-wifi-story .nfc-story-copy h2{font-size:clamp(22px,2.4vw,32px);line-height:1.5;margin:16px 0}
.band-wifi-story .nfc-story-status{min-height:50px;max-width:350px}
.band-wifi-story .nfc-story-note{max-width:350px;line-height:1.65;color:var(--synkro-gray)}
.band-wifi-story:not(.is-ready) .nfc-destination{opacity:1}
.band-wifi-story.is-playing .nfc-phone{animation:band-phone-approach 8s ease-in-out both}
.band-wifi-story.is-playing .nfc-notice:after{animation:band-notice-tap 8s ease-in-out both}
.band-wifi-story.is-complete .nfc-phone{transform:rotate(0)}
@keyframes band-phone-approach{
  0%,10%{transform:translate(0,0) rotate(6deg)}
  30%,64%{transform:translate(calc(-70cqw + 75px),calc(30cqw - 16px)) rotate(-4deg)}
  83%,100%{transform:translate(0,0) rotate(0)}
}
@keyframes band-notice-tap{0%,57%{opacity:0;transform:scale(1.3)}62%{opacity:1;transform:scale(.8)}67%,100%{opacity:0;transform:scale(1.4)}}
@media(max-width:1050px){.band-wifi-story{gap:24px;padding:26px}.band-wifi-story .nfc-story-scene{height:435px}}
@media(max-width:950px){.band-wifi-story{grid-template-columns:1fr;gap:0}.band-wifi-story .nfc-story-copy{padding:0 0 8px}.band-wifi-story .nfc-story-status{min-height:0}.band-wifi-story .nfc-story-note{max-width:480px}}
@media(max-width:560px){
  .band-wifi-section{padding-top:0;padding-bottom:48px}
  .band-wifi-story{padding:18px;border-radius:18px}
  .band-wifi-story .nfc-story-scene{height:355px;width:100%;max-width:540px;left:auto;margin:0 auto;transform:none}
  .band-demo-photo{border-radius:15px;top:24px}.band-demo-photo:after{font-size:6px;left:8px;bottom:8px;padding:5px 6px}
  .band-wifi-story .nfc-phone{width:126px;height:250px;top:24px;right:0;padding:25px 7px 10px}
  .band-wifi-story .nfc-notice{top:85px;padding:9px 6px}
  .band-wifi-story .nfc-destination{inset:28px 5px 9px;gap:6px;padding:4px}
  .band-wifi-story .band-wifi-icon{width:30px;height:30px}
  .band-wifi-story .nfc-destination b{font-size:14px}
  .band-wifi-network{padding:8px 3px;margin:3px 0}
  .band-wifi-story .nfc-destination .band-wifi-connect{padding:7px 5px}
  .band-wifi-story .nfc-waves{top:calc(30cqw - 8px)}
  .band-wifi-story.is-playing .nfc-phone{animation-name:band-phone-approach-small}
  .band-wifi-story .nfc-story-copy h2{font-size:23px}
}
@keyframes band-phone-approach-small{
  0%,10%{transform:translate(0,0) rotate(6deg)}
  30%,64%{transform:translate(calc(-70cqw + 63px),calc(30cqw - 16px)) rotate(-4deg)}
  83%,100%{transform:translate(0,0) rotate(0)}
}
@media(prefers-reduced-motion:reduce){.band-wifi-story .nfc-phone{transform:none!important}.band-wifi-story .nfc-destination{opacity:1}.band-wifi-story .nfc-notice,.band-wifi-story .nfc-waves{opacity:0}}
