/* Engineering cards: a bright input/output board based on the supplied card. */
#s4.development-design-stage {
  --development-paper:#fbfaff;
  --development-ink:#6257b5;
  --development-muted:#8d84c8;
  --development-rule:rgba(110,94,194,.16);
  --development-panel-a:#4938d0;
  --development-panel-b:#7650ed;
}

#s4.development-design-stage .product-design-deck {
  gap:clamp(58px,7vh,78px);
}

#s4.development-design-stage .product-decision-card {
  display:grid;
  grid-template-columns:minmax(330px,.43fr) minmax(0,.57fr);
  grid-template-rows:auto auto minmax(160px,1fr) auto;
  min-height:clamp(350px,24vw,420px);
  padding:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.7);
  border-radius:16px;
  background:var(--development-paper);
  color:var(--development-ink);
  box-shadow:
    0 30px 80px rgba(14,7,49,.22),
    inset 0 1px 0 rgba(255,255,255,.94);
}

#s4.development-design-stage .product-decision-card::before {
  background:radial-gradient(520px circle at var(--decision-x) var(--decision-y),rgba(105,78,234,.11),transparent 68%);
}

#s4.development-design-stage .product-decision-card::after {
  content:none;
}

#s4.development-design-stage .product-decision-card:hover,
#s4.development-design-stage .product-decision-card.is-stack-active {
  border-color:rgba(139,114,255,.56);
  box-shadow:
    0 34px 88px rgba(14,7,49,.26),
    0 0 32px rgba(116,79,238,.13),
    inset 0 1px 0 rgba(255,255,255,.96);
}

#s4.development-design-stage .product-decision-head.product-decision-head--no-code {
  grid-column:1/-1;
  grid-row:1;
  display:block;
  min-height:0;
  padding:24px 42px 0;
  border:0;
  background:none;
}

#s4.development-design-stage .product-decision-head::before {
  content:none;
}

#s4.development-design-stage .product-decision-head h4 {
  color:#5d52ae !important;
  font-size:clamp(24px,2vw,31px);
  font-weight:600;
  line-height:1.25;
}

#s4.development-design-stage .product-decision-body {
  display:contents;
}

#s4.development-design-stage .product-decision-rationale {
  grid-column:1/-1;
  grid-row:2;
  display:block;
  min-height:0;
  padding:8px 42px 18px;
  border:0;
}

#s4.development-design-stage .product-decision-rationale>p {
  max-width:none;
  color:var(--development-muted) !important;
  font-size:clamp(14px,1.12vw,17px);
  font-weight:500;
  line-height:1.7;
}

#s4.development-design-stage .product-decision-tracks {
  display:contents;
}

#s4.development-design-stage .product-decision-track {
  grid-row:3;
  justify-content:flex-start;
  min-height:160px;
  padding:24px 42px 25px;
  overflow:hidden;
  border:0;
  background:none;
}

#s4.development-design-stage .product-decision-track:first-child {
  grid-column:1;
}

#s4.development-design-stage .product-decision-track:last-child {
  grid-column:2;
  margin:0 42px 0 0;
  padding:24px 42px 25px;
  border:0;
  border-radius:14px 14px 0 0;
  background:
    radial-gradient(circle at 88% 8%,rgba(255,255,255,.14),transparent 35%),
    linear-gradient(118deg,var(--development-panel-a),var(--development-panel-b));
  box-shadow:
    0 0 34px rgba(94,63,228,.5),
    0 16px 38px rgba(63,39,183,.22),
    inset 0 1px 0 rgba(255,255,255,.16);
}

#s4.development-design-stage .product-decision-track::before,
#s4.development-design-stage .product-decision-track::after {
  content:none;
}

#s4.development-design-stage .product-decision-track>span {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  color:#8379c5 !important;
  font-size:clamp(14px,1.15vw,18px);
  font-weight:600;
}

#s4.development-design-stage .product-decision-track>span::after {
  content:'INPUT';
  color:#746ab0;
  font:600 10px/1 var(--mono);
  letter-spacing:.24em;
}

#s4.development-design-stage .product-decision-track:last-child>span {
  color:rgba(255,255,255,.88) !important;
}

#s4.development-design-stage .product-decision-track:last-child>span::after {
  content:'OUTPUT';
  color:rgba(255,255,255,.66);
}

#s4.development-design-stage .product-decision-track>p {
  max-width:520px;
  margin:26px 0 0;
  color:#675bb7 !important;
  font-size:clamp(21px,2.05vw,31px);
  font-weight:560;
  line-height:1.35;
}

#s4.development-design-stage .product-decision-track:last-child>p {
  color:#fff !important;
}

#s4.development-design-stage .product-decision-meaning {
  grid-column:1/-1;
  grid-row:4;
  min-height:66px;
  padding:13px 42px;
  border-top:0;
  background:rgba(251,250,255,.96);
}

#s4.development-design-stage .product-decision-meaning>span {
  color:#7466cd;
}

#s4.development-design-stage .product-decision-meaning div {
  gap:22px;
}

#s4.development-design-stage .product-decision-meaning small {
  color:#7367c9 !important;
  font-size:13px;
  font-weight:650;
}

#s4.development-design-stage .product-decision-meaning p {
  color:#8177bf !important;
  font-size:clamp(13px,1vw,16px);
  font-weight:500;
}

@media(max-width:900px) {
  #s4.development-design-stage .product-decision-card {
    display:flex;
    min-height:0;
    border-radius:14px;
  }
  #s4.development-design-stage .product-decision-head.product-decision-head--no-code {
    padding:28px 24px 0;
  }
  #s4.development-design-stage .product-decision-rationale {
    padding:12px 24px 24px;
  }
  #s4.development-design-stage .product-decision-body {
    display:block;
  }
  #s4.development-design-stage .product-decision-tracks {
    display:block;
    min-height:0;
  }
  #s4.development-design-stage .product-decision-track {
    min-height:180px;
    padding:28px 24px 32px;
  }
  #s4.development-design-stage .product-decision-track:last-child {
    margin:0 18px;
    padding:28px 24px 32px;
    border-radius:12px 12px 0 0;
  }
  #s4.development-design-stage .product-decision-meaning {
    min-height:0;
    padding:19px 24px;
  }
}

@media(max-width:560px) {
  #s4.development-design-stage .product-decision-track>span {
    font-size:14px;
  }
  #s4.development-design-stage .product-decision-track>p {
    margin-top:24px;
    font-size:22px;
  }
  #s4.development-design-stage .product-decision-meaning div {
    display:block;
  }
  #s4.development-design-stage .product-decision-meaning small {
    display:block;
    margin-bottom:5px;
  }
}

/* Dark engineering board, aligned with the approved input/output reference. */
#s4.development-design-stage {
  --development-ink:#f7f4ff;
  --development-muted:#aaa1c7;
  --development-rule:rgba(179,158,232,.14);
}
#s4.development-design-stage .product-decision-card {
  grid-template-columns:minmax(300px,.42fr) minmax(0,.58fr);
  grid-template-rows:auto auto minmax(170px,1fr) auto;
  min-height:clamp(370px,27vw,430px);
  border:1px solid rgba(176,151,229,.17);
  border-radius:15px;
  background:
    radial-gradient(circle at 92% 92%,rgba(122,104,211,.28),transparent 44%),
    radial-gradient(circle at 8% 10%,rgba(121,101,184,.13),transparent 38%),
    linear-gradient(112deg,#211b39 0%,#2b2550 48%,#413774 100%);
  color:var(--development-ink);
  box-shadow:0 30px 80px rgba(7,3,24,.28),inset 0 1px 0 rgba(255,255,255,.025);
}
#s4.development-design-stage .product-decision-card::before {content:none;}
#s4.development-design-stage .product-decision-card::after {
  content:'\2192';
  position:absolute;
  z-index:4;
  left:42%;
  top:59%;
  right:auto;
  bottom:auto;
  width:auto;
  height:auto;
  color:#a18bea;
  font:300 27px/1 Arial,sans-serif;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
#s4.development-design-stage .product-decision-card:hover,
#s4.development-design-stage .product-decision-card.is-stack-active {
  border-color:rgba(185,153,255,.34);
  box-shadow:0 34px 90px rgba(7,3,24,.34),0 0 36px rgba(116,79,238,.07),inset 0 1px 0 rgba(255,255,255,.035);
}
#s4.development-design-stage .product-decision-head.product-decision-head--no-code {
  padding:30px 38px 0;
  background:none;
}
#s4.development-design-stage .product-decision-head h4 {
  color:#f7f4ff !important;
  font-size:clamp(24px,2vw,31px);
  font-weight:560;
}
#s4.development-design-stage .product-decision-rationale {
  padding:8px 38px 24px;
  border-bottom:0;
}
#s4.development-design-stage .product-decision-rationale>p {
  color:var(--development-muted) !important;
  font-size:clamp(13px,1.04vw,16px);
  font-weight:400;
}
#s4.development-design-stage .product-decision-track {
  min-height:170px;
  margin:22px 30px 22px 38px;
  padding:23px 30px;
  border:1px dashed rgba(188,169,231,.3);
  border-radius:11px;
  background:
    radial-gradient(circle at 12% 8%,rgba(173,151,229,.13),transparent 50%),
    linear-gradient(135deg,rgba(78,67,123,.56),rgba(48,41,81,.6));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
#s4.development-design-stage .product-decision-track:last-child {
  margin:22px 38px 22px 30px;
  padding:23px 34px;
  border:0;
  border-left:6px solid rgba(217,206,255,.78);
  border-radius:11px;
  background:radial-gradient(circle at 89% 7%,rgba(255,255,255,.13),transparent 34%),linear-gradient(112deg,#4a37d4,#7650ed);
  box-shadow:0 0 34px rgba(94,63,228,.25),0 16px 38px rgba(22,13,67,.18),inset 0 1px 0 rgba(255,255,255,.13);
}
#s4.development-design-stage .product-decision-track::after {content:none;}
#s4.development-design-stage .product-decision-track:last-child::before {
  content:'';
  position:absolute;
  inset:auto 34px 45% 52%;
  height:12px;
  opacity:.66;
  background:radial-gradient(circle at 0 50%,#fff 0 5px,transparent 5.5px),radial-gradient(circle at 33.333% 50%,#fff 0 5px,transparent 5.5px),radial-gradient(circle at 66.666% 50%,rgba(255,255,255,.68) 0 5px,transparent 5.5px),radial-gradient(circle at 100% 50%,rgba(255,255,255,.38) 0 5px,transparent 5.5px),linear-gradient(90deg,rgba(255,255,255,.72),rgba(255,255,255,.26)) center/100% 1px no-repeat;
  pointer-events:none;
}
#s4.development-design-stage .product-decision-track>span {color:#b6a9d4 !important;font-size:clamp(13px,1.05vw,16px);font-weight:560;}
#s4.development-design-stage .product-decision-track>span::after {color:#9385bd;}
#s4.development-design-stage .product-decision-track:last-child>span {color:rgba(255,255,255,.86) !important;}
#s4.development-design-stage .product-decision-track:last-child>span::after {color:rgba(255,255,255,.66);}
#s4.development-design-stage .product-decision-track>p {
  z-index:2;
  margin:32px 0 0;
  color:#c5b9df !important;
  font-size:clamp(22px,2.2vw,34px);
  font-weight:520;
  line-height:1.4;
}
#s4.development-design-stage .product-decision-track:last-child>p {max-width:48%;color:#fff !important;}
#s4.development-design-stage .product-decision-track>p>strong,
#s4.development-design-stage .product-decision-track>p>small {display:block;color:inherit;}
#s4.development-design-stage .product-decision-track>p>strong {font:inherit;font-weight:520;}
#s4.development-design-stage .product-decision-track>p>small {
  margin-top:14px;
  color:#aaa0c3;
  font-size:clamp(12px,.96vw,15px);
  font-weight:400;
  line-height:1.65;
}
#s4.development-design-stage .product-decision-track:last-child>p>small {color:rgba(238,232,255,.72);}
#s4.development-design-stage .product-decision-meaning {
  min-height:72px;
  padding:15px 38px;
  border-top:0;
  background:rgba(139,119,211,.075);
}
#s4.development-design-stage .product-decision-meaning>span {color:#a593de;}
#s4.development-design-stage .product-decision-meaning div {gap:24px;}
#s4.development-design-stage .product-decision-meaning small {color:#f2edff !important;font-size:13px;font-weight:580;}
#s4.development-design-stage .product-decision-meaning p {color:#aaa0c4 !important;font-size:clamp(13px,1vw,16px);font-weight:400;}

@media(max-width:900px) {
  #s4.development-design-stage .product-decision-card {display:flex;min-height:0;border-radius:13px;}
  #s4.development-design-stage .product-decision-card::after {content:none;}
  #s4.development-design-stage .product-decision-head.product-decision-head--no-code {padding:27px 23px 0;}
  #s4.development-design-stage .product-decision-rationale {padding:10px 23px 23px;}
  #s4.development-design-stage .product-decision-track,
  #s4.development-design-stage .product-decision-track:last-child {min-height:180px;margin:18px;padding:25px 23px;}
  #s4.development-design-stage .product-decision-track:last-child>p {max-width:100%;}
  #s4.development-design-stage .product-decision-track:last-child::before {display:none;}
  #s4.development-design-stage .product-decision-meaning {min-height:0;padding:18px 23px;}
}