/* APIS Lab v6.65 — compact connected process section on Approach pages. */

body.v664-approach-page .apis-process-section{
  padding:82px 0 88px!important;
  background:#f3efe7;
  overflow:hidden;
}
body.v664-approach-page .apis-process-head{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);
  gap:48px;
  align-items:end;
  margin-bottom:42px;
}
body.v664-approach-page .apis-process-head-copy{min-width:0}
body.v664-approach-page .apis-process-head .v6-label{
  display:block;
  margin-bottom:14px;
}
body.v664-approach-page .apis-process-head h2{
  margin:0!important;
  max-width:900px;
  font-size:clamp(38px,3.45vw,56px)!important;
  line-height:.99!important;
  letter-spacing:-.045em!important;
  font-weight:720!important;
  text-wrap:balance;
}
body.v664-approach-page .apis-process-lead{
  margin:0!important;
  max-width:520px;
  font-size:15px!important;
  line-height:1.6!important;
  color:#666970;
  letter-spacing:-.01em!important;
}
body.v664-approach-page .apis-process-flow{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:16px!important;
  position:relative;
  align-items:stretch;
}
body.v664-approach-page .apis-process-card{
  position:relative;
  min-height:272px!important;
  padding:22px 22px 20px!important;
  border:1px solid rgba(17,19,24,.14)!important;
  border-radius:24px;
  background:rgba(255,255,255,.42);
  display:flex!important;
  flex-direction:column;
  margin:0!important;
  box-shadow:none!important;
  transition:transform .22s ease,border-color .22s ease,background .22s ease;
}
body.v664-approach-page .apis-process-card:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.72);
  border-color:rgba(17,19,24,.24)!important;
}
body.v664-approach-page .apis-process-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:30px;
}
body.v664-approach-page .apis-process-no{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:38px;
  height:26px;
  padding:0 10px;
  border-radius:999px;
  background:#111318;
  color:#c8ff4d!important;
  font-size:10px!important;
  line-height:1!important;
  font-weight:850!important;
  letter-spacing:.08em!important;
}
body.v664-approach-page .apis-process-phase{
  color:#72757b!important;
  font-size:9px!important;
  line-height:1!important;
  font-weight:800!important;
  letter-spacing:.14em!important;
  text-transform:uppercase;
}
body.v664-approach-page .apis-process-card h3{
  margin:0 0 12px!important;
  font-size:clamp(26px,2vw,34px)!important;
  line-height:1.02!important;
  letter-spacing:-.04em!important;
  font-weight:730!important;
}
body.v664-approach-page .apis-process-desc{
  margin:0 0 22px!important;
  font-size:14px!important;
  line-height:1.55!important;
  color:#5f6268;
  letter-spacing:-.006em!important;
}
body.v664-approach-page .apis-process-output{
  margin-top:auto;
  padding-top:15px;
  border-top:1px solid rgba(17,19,24,.12);
}
body.v664-approach-page .apis-process-output span{
  display:block;
  margin-bottom:5px;
  color:#80838a!important;
  font-size:8px!important;
  line-height:1!important;
  font-weight:850!important;
  letter-spacing:.15em!important;
  text-transform:uppercase;
}
body.v664-approach-page .apis-process-output b{
  display:block;
  max-width:240px;
  font-size:12px;
  line-height:1.4;
  font-weight:700;
  letter-spacing:-.012em;
}
/* Visible transition between stages: compact dark arrow, not a decorative guide line. */
body.v664-approach-page .apis-process-card:not(:last-child)::after{
  content:"→";
  position:absolute;
  z-index:4;
  right:-22px;
  top:50%;
  transform:translateY(-50%);
  width:28px;
  height:28px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#111318;
  color:#c8ff4d;
  border:4px solid #f3efe7;
  font-size:15px;
  font-weight:850;
  line-height:1;
}
body.v664-approach-page .apis-process-rule{
  display:grid;
  grid-template-columns:150px minmax(0,720px);
  gap:30px;
  align-items:start;
  margin-top:22px;
  padding-top:19px;
  border-top:1px solid rgba(17,19,24,.16);
}
body.v664-approach-page .apis-process-rule>span{
  padding-top:2px;
  color:#777a80;
  font-size:9px;
  line-height:1.25;
  font-weight:850;
  letter-spacing:.14em;
  text-transform:uppercase;
}
body.v664-approach-page .apis-process-rule p{
  margin:0!important;
  color:#4f5258;
  font-size:13px!important;
  line-height:1.55!important;
  letter-spacing:-.006em!important;
}

@media(max-width:1120px){
  body.v664-approach-page .apis-process-head{grid-template-columns:1fr;gap:18px;margin-bottom:34px}
  body.v664-approach-page .apis-process-lead{max-width:720px}
  body.v664-approach-page .apis-process-flow{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important}
  body.v664-approach-page .apis-process-card{min-height:245px!important}
  body.v664-approach-page .apis-process-card::after{display:none!important}
}
@media(max-width:700px){
  body.v664-approach-page .apis-process-section{padding:64px 0 68px!important}
  body.v664-approach-page .apis-process-head{margin-bottom:28px}
  body.v664-approach-page .apis-process-head h2{
    font-size:clamp(34px,9.5vw,46px)!important;
    line-height:1!important;
  }
  body.v664-approach-page .apis-process-lead{font-size:14px!important}
  body.v664-approach-page .apis-process-flow{grid-template-columns:1fr!important;gap:34px!important}
  body.v664-approach-page .apis-process-card{min-height:0!important;padding:20px!important;border-radius:21px}
  body.v664-approach-page .apis-process-card:not(:last-child)::after{
    display:flex!important;
    content:"↓";
    right:50%;
    top:auto;
    bottom:-31px;
    transform:translateX(50%);
    border-width:3px;
  }
  body.v664-approach-page .apis-process-card-top{margin-bottom:24px}
  body.v664-approach-page .apis-process-card h3{font-size:29px!important}
  body.v664-approach-page .apis-process-rule{grid-template-columns:1fr;gap:7px;margin-top:26px}
}