/* Sections 04-10 rebuild — exact static base + prepared independent layers */
.sx-pc{display:block}.sx-sp{display:none}
.sx-stage{position:relative;isolation:isolate;width:100%;max-width:1200px;aspect-ratio:1672/941;margin:0 auto;overflow:hidden;background:#05080c}
.sx-base,.sx-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.sx-base{z-index:0}
.sx-layer{z-index:2;pointer-events:none;background-position:center;background-size:100% 100%;background-repeat:no-repeat}
.sx-stage:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3.4%;z-index:5;pointer-events:none;background:linear-gradient(to bottom,rgba(5,8,12,0),rgba(5,8,12,.12),#05080c)}
.sx-mobile{position:relative;max-width:520px;margin:0 auto;padding:26px 14px 38px;background:#05080c;overflow:hidden}
.sx-mobile.light{background:#f7f8fa;color:#07101b}
.sx-mobile>*{position:relative;z-index:1}
.sx-m-title{margin:0 0 16px;font-size:clamp(30px,9vw,44px);font-weight:900;line-height:1.08;letter-spacing:-.055em}
.sx-m-title em{font-style:normal;color:#fff200}
.sx-m-art{display:block;width:100%;height:auto;margin:10px auto 0}
.sx-m-copy{margin:18px 0 0;font-size:clamp(22px,7vw,32px);font-weight:900;line-height:1.18}
.sx-m-copy mark{background:none;color:#fff200}
.sx-m-grid{display:grid;gap:10px}
.sx-m-card{padding:16px;border:1px solid rgba(62,145,255,.45);background:#07172c}
.sx-m-card strong{display:block;font-size:clamp(30px,9vw,44px)}
/* 04 */
.comp-ads .sx-stage{background:#04080e}
.s04-copy{background-image:url("./assets/approved/04_ad_click_value.webp");clip-path:polygon(0 0,100% 0,100% 39%,0 39%)}
.s04-left{background-image:url("./assets/approved/04_ad_click_value.webp");clip-path:polygon(0 30%,47% 30%,47% 100%,0 100%)}
.s04-right{background-image:url("./assets/approved/04_ad_click_value.webp");clip-path:polygon(53% 30%,100% 30%,100% 100%,53% 100%)}
/* 05 */
.comp-funnel .sx-stage{background:#04080e}
.s05-copy{background-image:url("./assets/approved/05_zero_inquiry.webp");clip-path:polygon(0 0,49% 0,49% 100%,0 100%)}
.s05-funnel{background-image:url("./assets/approved/05_zero_inquiry.webp");clip-path:polygon(45% 0,80% 0,80% 100%,45% 100%)}
.s05-person{background-image:url("./assets/approved/05_zero_inquiry.webp");clip-path:polygon(73% 0,100% 0,100% 100%,73% 100%)}
/* 06 */
.comp-heat .sx-stage{background:#04080e}
.s06-copy{background-image:url("./assets/approved/06_heatmap.webp");clip-path:polygon(0 0,100% 0,100% 30%,0 30%)}
.s06-heat{background-image:url("./assets/approved/06_heatmap.webp");clip-path:polygon(12% 22%,77% 22%,77% 100%,12% 100%)}
.s06-replay{background-image:url("./assets/approved/06_heatmap.webp");clip-path:polygon(61% 20%,100% 20%,100% 100%,61% 100%)}
/* 07 */
.comp-ai .sx-stage{background:#04080e}
.s07-copy{background-image:url("./assets/approved/07_ai_hypothesis.webp");clip-path:polygon(0 0,55% 0,55% 65%,0 65%)}
.s07-ui{background-image:url("./assets/approved/07_ai_hypothesis.webp");clip-path:polygon(48% 0,100% 0,100% 72%,48% 72%)}
.s07-priority{background-image:url("./assets/approved/07_ai_hypothesis.webp");clip-path:polygon(0 62%,100% 62%,100% 100%,0 100%)}
/* 08 */
.comp-decision .sx-stage{background:#04080e}
.s08-copy{background-image:url("./assets/approved/08_cost_decision.webp");clip-path:polygon(18% 0,100% 0,100% 34%,18% 34%)}
.s08-person{background-image:url("./assets/approved/08_cost_decision.webp");clip-path:polygon(0 12%,35% 12%,35% 100%,0 100%)}
.s08-cards{background-image:url("./assets/approved/08_cost_decision.webp");clip-path:polygon(27% 29%,100% 29%,100% 100%,27% 100%)}
/* 09 */
.comp-workflow .sx-stage{background:#04080e}
.s09-copy{background-image:url("./assets/approved/09_improvement_loop.webp");clip-path:polygon(0 0,56% 0,56% 45%,0 45%)}
.s09-timeline{background-image:url("./assets/approved/09_improvement_loop.webp");clip-path:polygon(12% 30%,49% 30%,49% 100%,12% 100%)}
.s09-loop{background-image:url("./assets/approved/09_improvement_loop.webp");clip-path:polygon(42% 14%,100% 14%,100% 100%,42% 100%)}
/* 10 */
.comp-pricing .sx-stage{background:#04080e}
.s10-copy{background-image:url("./assets/approved/10_pricing_cta.webp");clip-path:polygon(0 0,100% 0,100% 42%,0 42%)}
.s10-cards{background-image:url("./assets/approved/10_pricing_cta.webp");clip-path:polygon(0 38%,100% 38%,100% 78%,0 78%)}
.s10-cta{background-image:url("./assets/approved/10_pricing_cta.webp");clip-path:polygon(0 70%,100% 70%,100% 100%,0 100%)}
@media(min-width:768px){
  .comp-ads,.comp-funnel,.comp-heat,.comp-ai,.comp-decision,.comp-workflow,.comp-pricing{margin-top:-1px}
}
@media(max-width:767px){.sx-pc{display:none!important}.sx-sp{display:block}}
/* reveal motion for 04-10 */
@media(min-width:768px){
.sx-stage .sx-base{opacity:.22;filter:brightness(.55) saturate(.9) blur(1px);transform:scale(1.004);transition:opacity .55s ease .7s,filter .55s ease .7s,transform .55s ease .7s}
.sx-stage .sx-layer{opacity:0;will-change:opacity,transform}
.sx-stage .sx-layer:nth-of-type(2){transform:translateY(12px)}
.sx-stage .sx-layer:nth-of-type(3){transform:translateX(-12px)}
.sx-stage .sx-layer:nth-of-type(4){transform:translateX(12px)}
.sx-stage.in-view .sx-layer:nth-of-type(2){animation:reveal-up .62s .05s ease forwards}
.sx-stage.in-view .sx-layer:nth-of-type(3){animation:reveal-left .68s .16s ease forwards}
.sx-stage.in-view .sx-layer:nth-of-type(4){animation:reveal-right .68s .24s ease forwards}
.sx-stage.in-view .sx-base{opacity:1;filter:none;transform:none}
}
@keyframes reveal-up{to{opacity:1;transform:none}}
@keyframes reveal-left{to{opacity:1;transform:none}}
@keyframes reveal-right{to{opacity:1;transform:none}}
@media(max-width:767px){
.sx-mobile>*{opacity:0;transform:translateY(10px)}
.sx-sp.in-view .sx-mobile>*{animation:mobile-reveal .55s ease forwards}
.sx-sp.in-view .sx-mobile>*:nth-child(2){animation-delay:.10s}
.sx-sp.in-view .sx-mobile>*:nth-child(3){animation-delay:.20s}
.sx-sp.in-view .sx-mobile>*:nth-child(4){animation-delay:.30s}
}
@keyframes mobile-reveal{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
.s02-rebuild-stage .s02-layer,.s03-stage .s03-layer,.sx-stage .sx-layer,.sx-stage .sx-base,.sx-mobile>*{opacity:1!important;transform:none!important;filter:none!important;animation:none!important;transition:none!important}
}
/* 03+ seamless section joins */
@media(min-width:768px){
  .comp-ads,.comp-funnel,.comp-heat,.comp-ai,.comp-decision,.comp-workflow,.comp-pricing{
    margin-top:-54px!important;
    position:relative;
    z-index:3;
    background:transparent!important;
  }
  .comp-ads .sx-stage,.comp-funnel .sx-stage,.comp-heat .sx-stage,.comp-ai .sx-stage,
  .comp-decision .sx-stage,.comp-workflow .sx-stage,.comp-pricing .sx-stage{
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 54px,#000 calc(100% - 42px),transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0,#000 54px,#000 calc(100% - 42px),transparent 100%);
  }
  .sx-stage:after{
    height:20px!important;
    background:linear-gradient(to bottom,rgba(5,8,12,0),rgba(5,8,12,.06),rgba(5,8,12,.22))!important;
  }
}

/* common breathing-space joins for sections 04-10: 2026-09-20 */
@media(min-width:768px){
  .comp-ads,.comp-funnel,.comp-heat,.comp-ai,.comp-decision,.comp-workflow,.comp-pricing{
    margin-top:0!important;
    padding-top:64px;
    background:#05080c!important;
    overflow:hidden;
    position:relative;
    z-index:2;
  }
  .comp-ads::before,.comp-funnel::before,.comp-heat::before,.comp-ai::before,
  .comp-decision::before,.comp-workflow::before,.comp-pricing::before{
    content:"";
    position:absolute;
    left:0;right:0;top:0;height:64px;
    background:linear-gradient(to bottom,rgba(5,8,12,1) 0%,rgba(5,8,12,.92) 32%,rgba(5,8,12,.62) 70%,rgba(5,8,12,0) 100%);
    pointer-events:none;
    z-index:1;
  }
  .comp-ads .sx-stage,.comp-funnel .sx-stage,.comp-heat .sx-stage,.comp-ai .sx-stage,
  .comp-decision .sx-stage,.comp-workflow .sx-stage,.comp-pricing .sx-stage{
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }
}
/* unify 04-10 reveal behavior with 03 */
@media(min-width:768px){
  .comp-ads .sx-stage{--sx-bg:url("./assets/approved/04_ad_click_value.webp")}
  .comp-funnel .sx-stage{--sx-bg:url("./assets/approved/05_zero_inquiry.webp")}
  .comp-heat .sx-stage{--sx-bg:url("./assets/approved/06_heatmap.webp")}
  .comp-ai .sx-stage{--sx-bg:url("./assets/approved/07_ai_hypothesis.webp")}
  .comp-decision .sx-stage{--sx-bg:url("./assets/approved/08_cost_decision.webp")}
  .comp-workflow .sx-stage{--sx-bg:url("./assets/approved/09_improvement_loop.webp")}
  .comp-pricing .sx-stage{--sx-bg:url("./assets/approved/10_pricing_cta.webp")}

  .sx-stage::before{
    content:"";
    position:absolute;
    inset:-1.5%;
    z-index:0;
    background-image:var(--sx-bg);
    background-position:center;
    background-size:100% 100%;
    background-repeat:no-repeat;
    filter:blur(5px) brightness(.34) saturate(.82);
    transform:scale(1.025);
    opacity:.82;
    pointer-events:none;
  }

  .sx-stage .sx-base{
    opacity:0!important;
    visibility:hidden;
    pointer-events:none;
  }

  .sx-stage .sx-layer{
    opacity:0;
    will-change:opacity,transform;
  }
  .sx-stage .sx-layer:nth-of-type(1){transform:translateY(12px)}
  .sx-stage .sx-layer:nth-of-type(2){transform:translateX(-12px)}
  .sx-stage .sx-layer:nth-of-type(3){transform:translateX(12px)}

  .sx-stage.in-view .sx-layer:nth-of-type(1){animation:reveal-up .62s .04s ease forwards}
  .sx-stage.in-view .sx-layer:nth-of-type(2){animation:reveal-left .66s .15s ease forwards}
  .sx-stage.in-view .sx-layer:nth-of-type(3){animation:reveal-right .66s .22s ease forwards}
}
/* fix uncovered seams in independently revealed layers */
@media(min-width:768px){
  /* 04: fill the center gap between the A and B panels */
  .s04-left{clip-path:polygon(0 30%,55% 30%,55% 100%,0 100%)!important}
  .s04-right{clip-path:polygon(45% 30%,100% 30%,100% 100%,45% 100%)!important}

  /* 05: make the three layers overlap slightly so no background strip can appear */
  .s05-copy{clip-path:polygon(0 0,54% 0,54% 100%,0 100%)!important}
  .s05-funnel{clip-path:polygon(43% 0,84% 0,84% 100%,43% 100%)!important}
  .s05-person{clip-path:polygon(70% 0,100% 0,100% 100%,70% 100%)!important}

  /* 06: fill the exposed strip at the left of the heatmap/replay area */
  .s06-heat{clip-path:polygon(0 22%,76% 22%,76% 100%,0 100%)!important}
  .s06-replay{clip-path:polygon(58% 20%,100% 20%,100% 100%,58% 100%)!important}

  /* 07-10: slight overlap between neighboring layers to prevent future seam exposure */
  .s07-copy{clip-path:polygon(0 0,58% 0,58% 66%,0 66%)!important}
  .s07-ui{clip-path:polygon(45% 0,100% 0,100% 74%,45% 74%)!important}
  .s07-priority{clip-path:polygon(0 58%,100% 58%,100% 100%,0 100%)!important}

  .s08-copy{clip-path:polygon(0 0,100% 0,100% 36%,0 36%)!important}
  .s08-person{clip-path:polygon(0 0,38% 0,38% 100%,0 100%)!important}
  .s08-cards{clip-path:polygon(24% 27%,100% 27%,100% 100%,24% 100%)!important}

  .s09-copy{clip-path:polygon(0 0,100% 0,100% 46%,0 46%)!important}
  .s09-timeline{clip-path:polygon(0 28%,52% 28%,52% 100%,0 100%)!important}
  .s09-loop{clip-path:polygon(39% 12%,100% 12%,100% 100%,39% 100%)!important}

  .s10-copy{clip-path:polygon(0 0,100% 0,100% 44%,0 44%)!important}
  .s10-cards{clip-path:polygon(0 36%,100% 36%,100% 80%,0 80%)!important}
  .s10-cta{clip-path:polygon(0 68%,100% 68%,100% 100%,0 100%)!important}
}