/* =========================================================
   S06 — Setup / onboarding
   One outer white premium-glass surface.
   3 steps are not nested cards: only spacing/dividers.
   ========================================================= */

.setup-wrap{
  max-width:1600px;
  margin:0 auto 74px;
  padding:0 28px;
  position:relative;
}

.setup-glass{
  position:relative;
  overflow:hidden;
  border-radius:34px;
  background:rgba(249,252,255,.875);
  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,.40),
    inset 0 -1px 0 rgba(59,106,171,.04);
}

.setup-intro{
  padding:54px 58px 32px;
  text-align:center;
}

.setup-kicker{
  margin:0 0 14px;
  color:#4d8aca;
  font-size:15px;
  line-height:1.6;
  font-weight:600;
  letter-spacing:.03em;
}

.setup-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;
  word-break:normal;
  line-break:strict;
}

.setup-title-mobile{display:none}

.setup-lead{
  max-width:1120px;
  margin:22px auto 0;
  color:#17395f;
  font-size:clamp(16px,1.02vw,19px);
  line-height:1.78;
  font-weight:400;
  text-wrap:pretty;
}

.setup-steps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin:0 58px;
  border-top:1px solid rgba(47,98,161,.14);
  border-bottom:1px solid rgba(47,98,161,.14);
}

.setup-step{
  min-width:0;
  display:grid;
  grid-template-columns:116px minmax(0,1fr);
  gap:22px;
  align-items:center;
  padding:36px 32px 38px;
}

.setup-step + .setup-step{
  border-left:1px solid rgba(47,98,161,.14);
}

.setup-step-icon{
  width:104px;
  height:104px;
}

.setup-step-icon img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 9px 22px rgba(47,138,238,.12));
}

.setup-step-copy{
  min-width:0;
}

.setup-step-num{
  display:block;
  margin:0 0 9px;
  color:#3183e8;
  font-size:16px;
  line-height:1;
  font-weight:500;
  letter-spacing:.04em;
}

.setup-step h3{
  margin:0;
  color:#092f70;
  font-size:clamp(19px,1.30vw,24px);
  line-height:1.42;
  font-weight:600;
  letter-spacing:-.01em;
  word-break:normal;
  line-break:strict;
  text-wrap:balance;
}

.setup-step p{
  margin:11px 0 0;
  color:#29496c;
  font-size:clamp(14px,.93vw,17px);
  line-height:1.70;
  font-weight:400;
  text-wrap:pretty;
}

.setup-notes{
  margin:0 58px;
  padding:28px 0 8px;
}

.setup-note-main{
  margin:0;
  color:#0d356d;
  font-size:clamp(16px,1.02vw,19px);
  line-height:1.76;
  font-weight:600;
}

.setup-note-body{
  margin:10px 0 0;
  color:#24496f;
  font-size:clamp(15px,.98vw,18px);
  line-height:1.72;
  font-weight:400;
}

.setup-note-sub{
  margin:9px 0 0;
  color:#61758d;
  font-size:13px;
  line-height:1.68;
  font-weight:400;
}

.setup-actions{
  display:flex;
  justify-content:center;
  padding:18px 58px 42px;
}

.setup-primary-cta{
  margin-top:0;
  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));
}

/* Wide desktop: keep step headings on one line when there is sufficient width. */
@media(min-width:1320px){
  .setup-step h3{white-space:nowrap}
}

/* Tablet */
@media(max-width:1200px){
  .setup-wrap{padding:0 20px;margin-bottom:56px}
  .setup-intro{padding:45px 42px 28px}
  .setup-steps{margin:0 42px}
  .setup-step{
    grid-template-columns:86px minmax(0,1fr);
    gap:17px;
    padding:30px 22px 32px;
  }
  .setup-step-icon{width:82px;height:82px}
  .setup-step h3{font-size:18px}
  .setup-step p{font-size:14px}
  .setup-notes{margin:0 42px;padding-top:25px}
  .setup-actions{padding:18px 42px 36px}
}

/* Mobile */
@media(max-width:760px){
  .setup-wrap{padding:0 10px;margin-bottom:40px}
  .setup-glass{
    border-radius:26px;
    background:rgba(249,252,255,.875);
  }

  .setup-intro{
    padding:31px 20px 23px;
    text-align:left;
  }

  .setup-kicker{
    margin-bottom:10px;
    font-size:13px;
  }

  .setup-title-desktop{display:none}
  .setup-title-mobile{display:block}

  .setup-intro h2{
    font-size:31px;
    line-height:1.34;
    text-wrap:normal;
  }

  .setup-lead{
    margin-top:18px;
    font-size:15px;
    line-height:1.76;
  }

  .setup-steps{
    display:block;
    margin:0 20px;
  }

  .setup-step{
    grid-template-columns:78px minmax(0,1fr);
    gap:16px;
    padding:24px 0;
    align-items:center;
  }

  .setup-step + .setup-step{
    border-left:0;
    border-top:1px solid rgba(47,98,161,.14);
  }

  .setup-step-icon{
    width:72px;
    height:72px;
  }

  .setup-step-num{
    font-size:14px;
    margin-bottom:7px;
  }

  .setup-step h3{
    font-size:18px;
    line-height:1.42;
    white-space:normal;
    text-wrap:balance;
  }

  .setup-step p{
    margin-top:7px;
    font-size:14px;
    line-height:1.62;
  }

  .setup-notes{
    margin:0 20px;
    padding:24px 0 4px;
  }

  .setup-note-main{
    font-size:15px;
    line-height:1.72;
  }

  .setup-note-body{
    margin-top:9px;
    font-size:15px;
    line-height:1.72;
  }

  .setup-note-sub{
    margin-top:9px;
    font-size:13px;
    line-height:1.65;
  }

  .setup-actions{
    padding:18px 20px 30px;
  }

  .setup-primary-cta{
    margin-top:0;
    width:min(100%,330px);
  }
}

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

/* V34: S06 mobile title uses natural Japanese wrapping, like S05. */
@media(max-width:760px){
  .setup-title-mobile{
    display:inline;
  }
  .setup-intro h2{
    word-break:normal;
    line-break:strict;
    text-wrap:pretty;
    overflow-wrap:normal;
  }
}


/* =========================================================
   V35 — Inline embed-code proof
   Same outer glass surface; no nested card/frame.
   ========================================================= */
.setup-code-demo{
  margin:2px 58px 12px;
  padding:28px 0 16px;
}

.setup-code-head{
  display:block;
  text-align:center;
  margin-bottom:18px;
}

.setup-code-kicker{
  margin:0 0 6px;
  color:#4d8aca;
  font-size:13px;
  line-height:1.5;
  font-weight:600;
  letter-spacing:.04em;
}

.setup-code-head h3{
  margin:0;
  color:#092f70;
  font-size:clamp(20px,1.36vw,25px);
  line-height:1.45;
  font-weight:600;
}





.setup-code-line{
  width:100%;
  overflow-x:auto;
  padding:19px 0 17px;
  scrollbar-width:thin;
}

.setup-code-line code{
  display:block;
  width:max-content;
  min-width:100%;
  color:#17395f;
  font-family:
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    Menlo,
    monospace;
  font-size:clamp(13px,.90vw,16px);
  line-height:1.8;
  font-weight:500;
  white-space:nowrap;
}

.code-angle{color:#59718f}
.code-tag{color:#0b62bd}
.code-attr{color:#375d87}
.code-eq{color:#7589a1}
.code-string{color:#0e4e95}

.setup-code-note{
  margin:17px 0 0;
  color:#17395f;
  font-size:clamp(15px,.98vw,18px);
  line-height:1.72;
  font-weight:600;
}

.setup-code-caution{
  margin:8px 0 0;
  color:#61758d;
  font-size:13px;
  line-height:1.65;
  font-weight:400;
}

@media(max-width:1200px){
  .setup-code-demo{
    margin:0 42px 10px;
    padding:24px 0 14px;
  }
}

@media(max-width:760px){
  .setup-code-demo{
    margin:0 20px 8px;
    padding:22px 0 12px;
  }

  .setup-code-head{
    display:block;
    margin-bottom:14px;
    text-align:center;
  }

  .setup-code-head h3{
    font-size:19px;
    line-height:1.48;
  }



  .setup-code-line{
    padding:14px 0 13px;
  }

  .setup-code-line code{
    font-size:12.5px;
    line-height:1.75;
  }

  .setup-code-note{
    margin-top:14px;
    font-size:15px;
    line-height:1.68;
  }

  .setup-code-caution{
    font-size:13px;
  }
}

.setup-code-kicker,
.setup-code-head h3{
  text-align:center;
}