/* =========================================================
   S04 — Installation demo
   One outer white Premium Glass surface only.
   The approved browser/mockup asset sits directly on the glass.
   No nested card/frame is added around the image.
   ========================================================= */
.demo-wrap{
  max-width:1600px;
  margin:0 auto 74px;
  padding:0 28px;
  position:relative;
}
.demo-glass{
  position:relative;
  overflow:hidden;
  border-radius:34px;
  background:rgba(250,253,255,.91);
  backdrop-filter:blur(30px) saturate(126%);
  -webkit-backdrop-filter:blur(30px) saturate(126%);
  box-shadow:
    0 24px 72px rgba(7,27,59,.18),
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(59,106,171,.04);
}
.demo-glass::before{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.78),transparent);
  pointer-events:none;
}
.demo-intro{
  padding:54px 58px 24px;
  text-align:center;
}
.demo-kicker{
  margin:0 0 14px;
  color:#4d8aca;
  font-size:15px;
  line-height:1.6;
  font-weight:600;
  letter-spacing:.03em;
}
.demo-intro h2{
  margin:0;
  color:#082f74;
  font-family:"Yu Mincho","Hiragino Mincho ProN","Hiragino Mincho Pro",serif;
  font-size:clamp(44px,3.18vw,52px);
  line-height:1.28;
  font-weight:700;
  letter-spacing:.002em;
  text-wrap:balance;
  word-break:normal;
  line-break:strict;
}
.demo-title-mobile{display:none}
.demo-lead{
  max-width:1060px;
  margin:22px auto 0;
  color:#17395f;
  font-size:clamp(16px,1.02vw,19px);
  line-height:1.78;
  font-weight:400;
  text-wrap:pretty;
  word-break:normal;
  line-break:strict;
}
.demo-visual{
  margin:4px 58px 0;
  text-align:center;
}
.demo-visual img{
  display:block;
  width:min(100%,1280px);
  height:auto;
  margin:0 auto;
  object-fit:contain;
  filter:drop-shadow(0 22px 36px rgba(16,51,95,.14));
}
.demo-visual figcaption{
  max-width:880px;
  margin:12px auto 0;
  color:#57718f;
  font-size:14px;
  line-height:1.65;
  font-weight:400;
}
.demo-actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:20px 58px 42px;
}
.demo-primary-cta{
  margin-top:0;
}
.demo-button-note{
  margin:12px 0 0;
  color:#587391;
  font-size:14px;
  line-height:1.55;
  font-weight:400;
}
.demo-usage-note{
  margin:8px 0 0;
  color:#29496c;
  font-size:14px;
  line-height:1.65;
  font-weight:400;
  text-align:center;
}

@media(max-width:1200px){
  .demo-wrap{padding:0 20px;margin-bottom:56px}
  .demo-intro{padding:45px 42px 22px}
  .demo-visual{margin:2px 36px 0}
  .demo-actions{padding:18px 42px 36px}
}

@media(max-width:760px){
  .demo-wrap{padding:0 10px;margin-bottom:40px}
  .demo-glass{border-radius:26px;background:rgba(249,252,255,.875)}
  .demo-intro{
    padding:31px 20px 18px;
    text-align:left;
  }
  .demo-kicker{
    margin-bottom:10px;
    font-size:13px;
  }
  .demo-title-desktop{display:none}
  .demo-title-mobile{display:block}
  .demo-intro h2{
    font-size:32px;
    line-height:1.34;
    text-wrap:normal;
  }
  .demo-lead{
    margin-top:18px;
    font-size:15px;
    line-height:1.76;
  }
  .demo-visual{
    margin:4px 14px 0;
  }
  .demo-visual img{
    width:100%;
    filter:drop-shadow(0 13px 24px rgba(16,51,95,.13));
  }
  .demo-visual figcaption{
    margin-top:10px;
    padding:0 6px;
    font-size:13px;
    line-height:1.6;
    text-align:left;
  }
  .demo-actions{
    align-items:stretch;
    padding:18px 20px 30px;
  }
  .demo-primary-cta{
    align-self:center;
    width:min(100%,330px);
    margin-top:0;
  }
  .demo-button-note,
  .demo-usage-note{
    text-align:center;
  }
  .demo-button-note{font-size:13px}
  .demo-usage-note{font-size:13px;line-height:1.62}
}

@media(max-width:370px){
  .demo-intro h2{font-size:29px}
}

/* S04 CTA: exact Hero glass system, darker blue tint for stronger contrast. */
.demo-primary-cta{
  background:
    radial-gradient(120% 180% at 8% -20%,
      rgba(255,255,255,.42) 0%,
      rgba(255,255,255,.14) 34%,
      transparent 60%),
    radial-gradient(70% 150% at 90% 110%,
      rgba(110,192,255,.24) 0%,
      rgba(255,255,255,.04) 50%,
      transparent 76%),
    linear-gradient(112deg,
      rgba(34,126,255,.86),
      rgba(19,87,207,.88) 46%,
      rgba(14,58,163,.92));
}

/* Desktop lead: keep the closing phrase together and avoid orphaned "さい。". */
.demo-lead-tail{white-space:nowrap}

@media(min-width:1366px){
  .demo-lead{
    max-width:none;
    font-size:clamp(16px,.98vw,18px);
    white-space:nowrap;
  }
}

@media(min-width:761px) and (max-width:1365px){
  .demo-lead{
    max-width:1100px;
    white-space:normal;
  }
}

@media(max-width:760px){
  .demo-lead-tail{white-space:normal}
}