/* CT-BY · cj-how · 流程四步 · 山水青花瓷 */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,400&family=Inter:wght@300;400;500&display=swap');

.cjhow {
  --cobalt:#26477E; --cobalt-soft:#5C7BA8; --porcelain:#EEF1F2;
  --pk-ink:#1B2A3F; --pk-soft2:#5A6675; --pk-line:#D6DDE1;
  background: var(--porcelain); padding: 96px 0;
  font-family: 'Inter', -apple-system, sans-serif; font-weight: 300; color: var(--pk-ink);
}
.cjhow-wrap { max-width:1320px; margin: 0 auto; padding: 0 56px; }
.cjhow-head { text-align: center; margin-bottom: 48px; }
.cjhow-eyebrow { display: block; font-size: 11px; letter-spacing: .4em; text-transform: uppercase; color: var(--cobalt-soft); margin-bottom: 16px; }
.cjhow-title { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-size: 46px; color: var(--cobalt); margin: 0; }
.cjhow-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 34px; position: relative; }
.cjhow-row:before { content: ""; position: absolute; top: 23px; left: 12%; right: 12%; height: 1px; background: var(--pk-line); }
.cjhow-step { text-align: center; position: relative; }
.cjhow-n { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--cobalt-soft); color: var(--cobalt); font-family: 'Cormorant Garamond', serif; font-size: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; background: var(--porcelain); position: relative; z-index: 1; }
.cjhow-t { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 21px; color: var(--cobalt); margin-bottom: 8px; }
.cjhow-d { font-size: 13px; color: var(--pk-soft2); line-height: 1.6; max-width: 220px; margin: 0 auto; }
@media (max-width: 860px) {
  .cjhow { padding: 56px 0; }
  .cjhow-wrap { padding: 0 22px; }
  .cjhow-row { grid-template-columns: 1fr 1fr; gap: 28px 18px; }
  .cjhow-row:before { display: none; }
}

/* Premium v16 pass: process as a quiet service standard. */
.cjhow{
  --cobalt:#26477E;
  --cobalt-soft:#5C7BA8;
  --porcelain:#EEF1F2;
  --pk-ink:#1B2A3F;
  --pk-soft2:#5A6675;
  --pk-line:#D6DDE1;
  background:var(--porcelain);
  padding:96px 0;
}
.cjhow-wrap{
  max-width:1380px;
  padding:0 72px;
}
.cjhow-head{
  text-align:left;
  margin-bottom:42px;
}
.cjhow-eyebrow{
  color:var(--cobalt-soft);
  letter-spacing:.26em;
}
.cjhow-title{
  color:var(--cobalt);
  font-size:42px;
  line-height:1.08;
}
.cjhow-row{
  gap:0;
  border-top:1px solid var(--pk-line);
}
.cjhow-row:before{
  display:none;
}
.cjhow-step{
  text-align:left;
  padding:28px 32px 0 0;
}
.cjhow-step + .cjhow-step{
  padding-left:32px;
  border-left:1px solid var(--pk-line);
}
.cjhow-n{
  width:42px;
  height:42px;
  margin:0 0 18px;
  color:var(--cobalt);
  border-color:rgba(20,59,49,.34);
  background:var(--porcelain);
}
.cjhow-t{
  color:var(--cobalt);
  font-size:23px;
}
.cjhow-d{
  color:var(--pk-soft2);
  margin:0;
}
@media (max-width:860px){
  .cjhow{
    padding:50px 0 46px;
  }
  .cjhow-wrap{
    padding:0 24px;
  }
  .cjhow-eyebrow{
    font-size:10px;
    letter-spacing:.2em;
    margin-bottom:12px;
  }
  .cjhow-title{
    font-size:34px;
    line-height:1.08;
    text-wrap:balance;
  }
  .cjhow-head{
    margin-bottom:24px;
  }
  .cjhow-row{
    position:relative;
    grid-template-columns:1fr;
    border-top:0;
    padding-left:4px;
  }
  .cjhow-row:after{
    content:"";
    position:absolute;
    top:22px;
    bottom:22px;
    left:24px;
    width:1px;
    background:linear-gradient(180deg,rgba(92,123,168,.18),rgba(92,123,168,.44),rgba(92,123,168,.18));
  }
  .cjhow-step,
  .cjhow-step + .cjhow-step{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:40px 1fr;
    column-gap:17px;
    padding:18px 0 20px;
    border-left:0;
    border-bottom:0;
  }
  .cjhow-n{
    width:40px;
    height:40px;
    font-size:17px;
    grid-row:1 / span 2;
    grid-column:1;
    margin:0;
    border-color:rgba(92,123,168,.38);
    background:var(--porcelain);
  }
  .cjhow-t,
  .cjhow-d{
    grid-column:2;
  }
  .cjhow-t{
    font-size:24px;
    line-height:1.08;
    margin-bottom:5px;
  }
  .cjhow-d{
    font-size:13.6px;
    line-height:1.62;
    max-width:300px;
  }
}