/* The selected service tab carries the actual time until the next change. */
.method-tab{position:relative}
.method-tab::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:3px;border-radius:3px;background:linear-gradient(90deg,#62d5ff,#e5f5ff);transform:scaleX(0);transform-origin:left center;opacity:0}
.service-rotating .method-tab[aria-selected="true"]::after{opacity:1;animation:service-cycle var(--service-cycle,8000ms) linear forwards}
@keyframes service-cycle{to{transform:scaleX(1)}}

/* Crossfade at the real artwork's position, without a blank handoff frame. */
.service-panels{position:relative}
.service-relaying .detail-art{animation:service-art-in .62s ease-in-out both}
.service-relay{position:absolute;z-index:5;inset:0;display:grid;place-items:center;pointer-events:none}
.relay-object{aspect-ratio:1;object-fit:contain;pointer-events:none}
.relay-leaving{animation:service-art-out .62s ease-in-out both}
@keyframes service-art-out{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-8px) scale(.985)}}
@keyframes service-art-in{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}

/* Situation selection turns the static magnifier into a useful checklist. */
.situations .conditions-grid{align-items:start}
.situation-scanner{position:relative;isolation:isolate;overflow:hidden;margin-top:32px;padding:24px 25px 21px;border-radius:24px;background:radial-gradient(circle at 90% 0,#145dcd 0,transparent 46%),linear-gradient(155deg,#0d357d,#071d50 72%);color:#fff;box-shadow:0 25px 48px #09378628}
.situation-scanner::before{content:"";position:absolute;inset:0;border:1px solid #9ad7ff55;border-radius:inherit;pointer-events:none}
.scanner-head{display:flex;align-items:center;gap:16px;margin-bottom:23px}
.scanner-head img{width:72px;height:72px;object-fit:contain;filter:drop-shadow(0 9px 12px #0016447a)}
.scanner-head strong{display:block;font-size:17px;letter-spacing:-.045em}
.scanner-head span{display:block;margin-top:5px;color:#bcdcff;font-size:13px;line-height:1.5}
.scanner-sheet{position:relative;overflow:hidden;padding:19px 20px 17px;border:1px solid #9bcaff68;border-radius:14px;background:linear-gradient(140deg,#f9fbff,#e3eeff);color:#15335f;box-shadow:0 14px 30px #00174c5e}
.scanner-sheet::before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:linear-gradient(90deg,#245cf6,#7edaff)}
.scanner-sheet h3{position:relative;margin:0 0 13px;font-size:13px;color:#5275a5;letter-spacing:-.02em}
.scanner-sheet ul{position:relative;z-index:1;list-style:none;display:grid;gap:11px;margin:0;padding:0}
.scanner-sheet li{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:700;line-height:1.4;letter-spacing:-.035em}
.scanner-sheet li::before{content:"";width:9px;height:9px;margin:0 6px;flex:none;border-radius:50%;background:#2f69d8;box-shadow:0 0 0 4px #dceaff}
.scanner-sweep{position:absolute;inset:-10% -15%;z-index:2;pointer-events:none;background:linear-gradient(100deg,transparent 35%,#76d5ff12 44%,#76d5ffbd 50%,#76d5ff12 56%,transparent 65%);transform:translateX(-120%);opacity:0}
.situation-scanner.is-scanning .scanner-sweep{animation:scanner-pass .76s cubic-bezier(.3,.08,.65,1) both}
.situation-scanner.is-scanning .scanner-head img{animation:scanner-lens .66s cubic-bezier(.16,1,.3,1) both}
.situation-scanner.is-scanning .scanner-sheet{animation:scanner-sheet .55s cubic-bezier(.16,1,.3,1) both}
@keyframes scanner-pass{10%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateX(120%)}}
@keyframes scanner-lens{30%{transform:translateY(-5px) rotate(-7deg)}65%{transform:translateY(2px) rotate(3deg)}100%{transform:none}}
@keyframes scanner-sheet{from{transform:translateY(9px) scale(.985);filter:brightness(1.18)}to{transform:none;filter:none}}
.scanner-hint{margin:17px 0 0;font-size:13px;line-height:1.6;color:#aecfff}
.situation-item>summary{transition:color .2s,padding-left .2s}
.situation-item[open]>summary{padding-left:11px;color:#164ed3}
.situation-item[open]>summary::before{content:"";width:4px;align-self:stretch;min-height:23px;flex:none;border-radius:4px;background:#245cf6;margin-right:2px}

/* The sample film keeps the campaign's deep-blue contrast. */
.film{border:1px solid #8bd8ff68;box-shadow:0 24px 60px #09256b27,0 0 34px #3298ff25}
.film video{filter:saturate(1.21) contrast(1.18) brightness(.86)}
.film-shade{background:linear-gradient(180deg,#071c49a8,transparent 35%,#071b43a3),linear-gradient(90deg,#124bd140,transparent 70%)}
.film::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px #d3eeff21,inset 0 0 50px #0c52c92b;pointer-events:none}

/* Keep the artwork behind the closing message instead of giving it a separate lower panel. */
.final-section{background:#061a4c}
.final-cta{min-height:450px;padding:64px 0}
.final-backdrop{inset:0;width:auto;height:auto}
.final-backdrop img{object-position:center 50%}
.final-section::after{background:linear-gradient(90deg,#061849 0%,#061849e8 28%,#06184945 63%,transparent 100%)}
.final-light{background:radial-gradient(ellipse at 73% 46%,#4ebeff23,transparent 52%)}

@media(max-width:760px){
  .guide-type{gap:0}
  .service-visual{width:clamp(164px,48vw,192px);height:auto;aspect-ratio:1;min-height:0;margin:10px auto 24px;justify-self:center;overflow:hidden;border:1px solid #8bb9ef46;border-radius:22px;background:linear-gradient(145deg,#16407e,#0b285e)}
  .service-visual::before{display:none}
  .service-visual :is(.detail-art,.relay-object){width:88%;height:88%;max-width:none;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 12px 12px #02143370)}
  .situation-scanner{margin-top:25px;padding:19px}
  .situation-item>div>.situation-scanner{margin:0 0 18px}
  .scanner-head{gap:12px;margin-bottom:16px}.scanner-head img{width:58px;height:58px}.scanner-head strong{font-size:15px}
  .scanner-sheet{padding:16px}.scanner-sheet li{font-size:13px}
  .final-cta{min-height:450px;padding:54px 0;align-items:center}
  .final-backdrop{inset:0;width:auto;height:auto}
  .final-backdrop img{object-position:63% 65%}
  .final-section::after{background:linear-gradient(180deg,#061849d8 0%,#061849bb 56%,#061849a8 100%)}
}
@media(max-width:520px){
  .situation-scanner{border-radius:19px}
  .scanner-head img{width:52px;height:52px}.scanner-sheet li{font-size:13px}
  .final-cta{min-height:440px;padding:50px 0;align-items:center}
  .final-backdrop{inset:0;width:auto;height:auto}
  .final-backdrop img{object-position:61% 64%}
}
.effects-paused .service-relay,.effects-paused .situation-scanner.is-scanning .scanner-sweep,.effects-paused .situation-scanner.is-scanning .scanner-head img,.effects-paused .situation-scanner.is-scanning .scanner-sheet{animation:none}
.effects-paused .service-relay{display:none}.effects-paused .service-relaying .detail-art{animation:none;opacity:1}
.effects-paused .service-rotating .method-tab[aria-selected="true"]::after{animation:none;opacity:0}
@media(prefers-reduced-motion:reduce){
  .service-rotating .method-tab[aria-selected="true"]::after,.situation-scanner.is-scanning .scanner-sweep{animation:none;opacity:0}
  .situation-scanner.is-scanning .scanner-head img,.situation-scanner.is-scanning .scanner-sheet{animation:none}
}
/* Autoplay is the default; keep the page free of prominent playback switches. */
.service-autoplay-control,#review-autoplay{display:none!important}