/* =========================================================
   S02 — Flow comparison
   One outer premium glass surface only.
   No nested cards / no inner framed boxes.
   ========================================================= */
.flow-wrap{
  max-width:1600px;
  margin:0 auto 72px;
  padding:0 28px;
  position:relative;
}
.flow-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);
}
.flow-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;
}
.flow-intro{
  padding:54px 58px 34px;
}
.flow-kicker{
  margin:0 0 14px;
  color:#4d8aca;
  font-size:13px;
  font-weight:700;
  letter-spacing:.28em;
}
.flow-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;
}
.flow-lead{
  margin-top:24px;
  color:#17395f;
  font-size:clamp(16px,1.02vw,19px);
  line-height:1.78;
  font-weight:400;
}
.flow-lead p{margin:0}
.flow-lead p+p{margin-top:7px}

/* Two rows live directly on the same glass.
   There is NO separate framed row container. */
.flow-table{
  position:relative;
  margin:0 38px;
  border-top:1px solid rgba(37,86,151,.14);
  border-bottom:1px solid rgba(37,86,151,.14);
}
.flow-row{
  display:grid;
  grid-template-columns:210px minmax(0,1fr);
  min-width:0;
}
.flow-row + .flow-row{
  border-top:1px solid rgba(37,86,151,.15);
}
.flow-row-before{
  background:transparent;
}
.flow-row-after{
  /* slightly denser blue glass wash, no frame, no radius, no shadow */
  background:
    linear-gradient(
      90deg,
      rgba(195,225,255,.48) 0%,
      rgba(211,234,255,.38) 46%,
      rgba(218,238,255,.29) 100%
    );
}
.flow-row-label{
  padding:34px 28px 34px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
}
.flow-row-name{
  color:#123a76;
  font-size:clamp(20px,1.35vw,26px);
  line-height:1.55;
  font-weight:600;
}
.flow-row-after .flow-row-name{
  color:#0b65c8;
}
.flow-row-rule{
  width:38px;
  height:2px;
  margin:14px 0 18px;
  background:rgba(23,91,174,.56);
}
.flow-row-label p{
  margin:0;
  color:#234364;
  font-size:clamp(16px,1.02vw,19px);
  line-height:1.78;
  font-weight:400;
}
.flow-steps{
  list-style:none;
  margin:0;
  padding:20px 0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  min-width:0;
}
.flow-step{
  position:relative;
  min-width:0;
  padding:14px 14px 18px;
  text-align:center;
}
.flow-step + .flow-step{
  border-left:1px solid rgba(43,93,157,.13);
}
.flow-num{
  position:absolute;
  top:12px;
  left:18px;
  color:#3183e8;
  font-size:16px;
  line-height:1;
  font-weight:500;
  letter-spacing:.02em;
}
.flow-icon{
  width:116px;
  height:116px;
  margin:5px auto 13px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:none;
  box-shadow:none;
}
.flow-icon img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
}
.flow-step h3{
  margin:0;
  color:#092f70;
  font-size:clamp(17px,1.15vw,22px);
  line-height:1.42;
  font-weight:600;
  letter-spacing:-.01em;
  word-break:normal;
  line-break:strict;
  text-wrap:balance;
}
.flow-step p{
  width:fit-content;
  max-width:min(100%,18em);
  margin:8px auto 0;
  color:#29496c;
  font-size:clamp(14px,.93vw,17px);
  line-height:1.67;
  font-weight:400;
  text-align:left;
  text-wrap:pretty;
}
.flow-note{
  padding:28px 58px 42px;
}
.flow-note-main{
  margin:0;
  color:#0d356d;
  font-size:clamp(16px,1.02vw,19px);
  line-height:1.78;
  font-weight:600;
}
.flow-note-sub{
  margin:8px 0 0;
  color:#57718f;
  font-size:clamp(14px,.93vw,17px);
  line-height:1.67;
  font-weight:400;
}

/* Tablet */
@media(max-width:1200px){
  .flow-wrap{padding:0 20px;margin-bottom:54px}
  .flow-intro{padding:44px 42px 28px}
  .flow-table{margin:0 26px}
  .flow-row{grid-template-columns:175px minmax(0,1fr)}
  .flow-row-label{padding:28px 20px 28px 10px}
  .flow-row-name{font-size:20px;line-height:1.55}
  .flow-steps{padding:16px 0}
  .flow-step{padding:14px 13px 16px}
  .flow-num{left:10px}
  .flow-icon{width:98px;height:98px}
  .flow-icon img{width:100%;height:100%}
  .flow-step h3{font-size:18px;line-height:1.42}
  .flow-step p{font-size:14px;line-height:1.67}
  .flow-note{padding:25px 42px 34px}
}

/* Mobile: still one outer glass surface.
   Each flow row stacks, but the individual steps remain frameless. */
@media(max-width:760px){
  .flow-wrap{padding:0 10px;margin-bottom:40px}
  .flow-glass{border-radius:26px;background:rgba(249,252,255,.875)}
  .flow-intro{padding:30px 20px 22px}
  .flow-kicker{font-size:11px;letter-spacing:.22em;margin-bottom:10px}
  .flow-intro h2{font-size:34px;line-height:1.28}
  .flow-lead{font-size:15px;line-height:1.76;margin-top:17px}
  .flow-table{margin:0 14px}
  .flow-row{display:block}
  .flow-row-label{padding:23px 8px 18px}
  .flow-row-name{font-size:17px;line-height:1.58}
  .flow-row-rule{margin:10px 0 12px}
  .flow-row-label p{font-size:15px;line-height:1.76}
  .flow-row-after{
    background:
      linear-gradient(
        180deg,
        rgba(197,226,255,.52) 0%,
        rgba(215,236,255,.38) 100%
      );
  }
  .flow-steps{
    grid-template-columns:1fr;
    padding:0 8px 14px;
  }
  .flow-step{
    min-height:118px;
    display:grid;
    grid-template-columns:82px minmax(0,1fr);
    grid-template-rows:auto auto;
    column-gap:16px;
    text-align:left;
    align-items:center;
    padding:16px 4px;
  }
  .flow-step + .flow-step{
    border-left:0;
    border-top:1px solid rgba(43,93,157,.13);
  }
  .flow-num{
    top:17px;
    left:auto;
    right:5px;
    font-size:15px;
  }
  .flow-icon{
    grid-column:1;
    grid-row:1 / 3;
    width:76px;
    height:76px;
    margin:0;
  }
  .flow-icon img{width:100%;height:100%}
  .flow-step h3{
    grid-column:2;
    grid-row:1;
    align-self:end;
    padding-right:32px;
    font-size:18px;
    line-height:1.42;
    text-align:left;
    white-space:normal;
    text-wrap:balance;
    word-break:normal;
    line-break:strict;
  }
  .flow-step p{
    grid-column:2;
    grid-row:2;
    align-self:start;
    width:100%;
    max-width:none;
    margin:5px 0 0;
    font-size:14px;
    line-height:1.55;
    text-align:left;
    text-wrap:pretty;
  }
  .flow-pc-break{display:none}
  .flow-note{padding:22px 20px 30px}
  .flow-note-main{font-size:15px;line-height:1.76}
  .flow-note-sub{font-size:14px;line-height:1.67}
}

@media(min-width:1201px){
  .flow-step h3{
    white-space:nowrap;
    text-wrap:nowrap;
  }
}

@media(min-width:761px) and (max-width:1200px){
  .flow-step h3{
    white-space:normal;
    text-wrap:balance;
    word-break:normal;
    line-break:strict;
    font-size:17px;
  }
}


@media(max-width:760px){

}

.flow-title-desktop{display:inline}
.flow-title-mobile{display:none}
@media(max-width:760px){
  .flow-title-desktop{display:none}
  .flow-title-mobile{display:block}
  .flow-intro h2{
    font-size:32px;
    line-height:1.34;
    text-wrap:normal;
  }
}