/* Three complete product-design cards in normal document flow. */
#s3.product-design-stage {
  min-height:0;
  height:auto;
}

#s3.product-design-stage .product-design-pin {
  position:relative;
  top:auto;
  display:block;
  height:auto;
  min-height:0;
  padding:clamp(56px,6vw,88px) 0 clamp(96px,9vw,138px);
  overflow:visible;
}
#s3 .product-design-pin::before,
#s3 .product-design-pin::after { display:none; }

#s3 .product-design-grid {
  inset:16% 7% 12%;
  opacity:.18;
  background-image:linear-gradient(rgba(224,210,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(224,210,255,.06) 1px,transparent 1px);
  background-size:80px 80px;
  -webkit-mask-image:radial-gradient(ellipse at center,#000,transparent 72%);
  mask-image:radial-gradient(ellipse at center,#000,transparent 72%);
}

#s3.product-design-stage .product-design-stage-head {
  display:block;
  width:min(720px,100%);
  margin:0 auto clamp(32px,3.5vw,48px);
  padding:0;
  border:0;
  text-align:center;
}
#s3 .product-design-stage-title { text-align:center; }
#s3.product-design-stage .product-design-stage-title > span {
  display:block;
  margin:0 0 10px;
  padding:0;
  border:0;
  color:#e0d2f8;
  font-size:16px;
  line-height:1.2;
  letter-spacing:.14em;
}
#s3.product-design-stage .product-design-stage-title h3 {
  width:auto;
  font-size:clamp(30px,3vw,42px);
  line-height:1.12;
  font-weight:450;
  background-image:linear-gradient(110deg,#fbf7ff 25%,#b5a3ed 86%);
}
#s3.product-design-stage .product-design-stage-title p {
  margin:9px 0 0;
  color:#e5dceb;
  font-size:16px;
  line-height:1.45;
}
#s3.product-design-stage .product-design-stage-title.is-copy-prepared > span,
#s4.development-design-stage .product-design-stage-title.is-copy-prepared > span {
  opacity:0;
  filter:blur(5px);
  transform:translateY(.42em);
  transition:opacity .48s ease,transform .58s cubic-bezier(.22,1,.36,1),filter .48s ease;
}
#s3.product-design-stage .product-design-stage-title.is-copy-visible > span,
#s4.development-design-stage .product-design-stage-title.is-copy-visible > span {
  opacity:1;
  filter:blur(0);
  transform:translateY(0);
}
#s3.product-design-stage .product-design-stage-title h3.product-heading-title-copy,
#s4.development-design-stage .product-design-stage-title h3.product-heading-title-copy {
  color:#fff;
  background:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  -webkit-text-fill-color:initial;
}
#s3 .product-heading-title-char,
#s3 .product-heading-subtitle-char,
#s4 .product-heading-title-char,
#s4 .product-heading-subtitle-char {
  display:inline-block;
  opacity:0;
  filter:blur(5px);
  transform:translateY(.42em);
  transition:
    opacity .48s ease var(--heading-char-delay),
    transform .58s cubic-bezier(.22,1,.36,1) var(--heading-char-delay),
    filter .48s ease var(--heading-char-delay);
}
#s3 .product-heading-title-char,
#s4 .product-heading-title-char {
  color:var(--heading-char-color,#fff);
  -webkit-text-fill-color:currentColor;
}
#s3 .product-heading-subtitle-char,
#s4 .product-heading-subtitle-char {
  color:#e5dceb;
}
#s3 .product-design-stage-title.is-copy-visible .product-heading-title-char,
#s3 .product-design-stage-title.is-copy-visible .product-heading-subtitle-char,
#s4 .product-design-stage-title.is-copy-visible .product-heading-title-char,
#s4 .product-design-stage-title.is-copy-visible .product-heading-subtitle-char {
  opacity:1;
  filter:blur(0);
  transform:translateY(0);
}
#s3 .product-design-stage-range { display:none; }

#s3.product-design-stage .product-design-deck {
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
  gap:4.2780748663vw;
  width:94%;
  min-height:0;
  margin:0 auto;
  perspective:none;
}
#s3 .product-design-deck::before { content:none; }

#s3.product-design-stage .product-design-deck .product-decision-card {
  position:relative;
  inset:auto;
  display:flex;
  flex-direction:column;
  width:100%;
  min-width:0;
  height:auto;
  min-height:0;
  border:1px solid rgba(221,202,255,.36);
  border-radius:15px;
  overflow:hidden;
  background:
    radial-gradient(ellipse 100% 42% at 50% 0%,rgba(191,146,255,.15),transparent 82%),
    linear-gradient(165deg,rgba(88,67,139,.82) 0%,rgba(72,52,119,.82) 46%,rgba(58,42,103,.84) 100%);
  box-shadow:0 18px 36px -24px rgba(26,13,57,.3),inset 0 1px 0 rgba(237,215,255,.18);
  opacity:1;
  filter:none;
  transform:none;
  transition:border-color .3s ease;
}
#s3.product-design-stage .product-design-deck .product-decision-card:hover {
  border-color:rgba(214,190,255,.52);
}
#s3 .product-decision-card::before {
  inset:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(170,113,255,.08),transparent 65%);
  opacity:1;
}
#s3 .product-decision-card::after {
  inset:0;
  opacity:.7;
  animation:none;
  background:
    radial-gradient(ellipse 4px 5px at 14px 14px,rgba(245,232,255,.6),rgba(175,133,230,.2) 35%,transparent 90%),
    radial-gradient(ellipse 4px 5px at calc(100% - 14px) 14px,rgba(245,232,255,.6),rgba(175,133,230,.2) 35%,transparent 90%);
}

#s3.product-design-stage .product-decision-head {
  display:block;
  min-height:0;
  padding:25px 24px 12px;
  border:0;
  text-align:center;
}
#s3.product-design-stage .product-decision-code {
  position:static;
  display:block;
  width:auto;
  margin:0 0 9px;
  padding:0;
  border:0;
  background:none;
  transform:none;
}
#s3.product-design-stage .product-decision-code strong {
  display:block;
  color:#c8b9dd !important;
  font-size:16px;
  font-weight:400;
  line-height:1;
  letter-spacing:.12em;
  text-shadow:none;
}
#s3.product-design-stage .product-decision-head h4 {
  color:#e6dbf6 !important;
  font-size:clamp(21px,1.8vw,25px);
  font-weight:450;
  line-height:1.35;
  transform:none;
}
#s3.product-design-stage .product-decision-body {
  display:flex;
  flex:1;
  min-height:0;
  flex-direction:column;
}
#s3.product-design-stage .product-decision-rationale {
  display:block;
  flex:none;
  min-height:90px;
  padding:0 24px 10px;
  border:0;
  text-align:center;
}
#s3.product-design-stage .product-decision-rationale > p {
  margin:0;
  color:#c9bddc !important;
  font-size:16px;
  font-weight:350;
  line-height:1.5;
  transform:none;
}

#s3.product-design-stage .product-decision-tracks {
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:repeat(2,1fr);
  gap:18px;
  flex:1;
  min-height:0;
  padding:12px 24px 22px;
}
#s3.product-design-stage .product-decision-track {
  display:block;
  min-height:0;
  padding:0;
  border:0;
  overflow:visible;
}
#s3 .product-decision-track::before,
#s3 .product-decision-track::after { content:none; }
#s3.product-design-stage .product-decision-track > span {
  display:block;
  color:#d9c2fb;
  font-size:16px;
  font-weight:500;
  line-height:1.4;
  transform:none;
}
#s3.product-design-stage .product-decision-track > p {
  max-width:none;
  margin:6px 0 0;
  color:#e3dbea;
  font-size:16px;
  font-weight:350;
  line-height:1.6;
  transform:none;
}
#s3.product-design-stage .product-decision-meaning {
  display:block;
  min-height:118px;
  padding:17px 24px 21px;
  border-top:1px solid rgba(204,181,243,.16);
  background:rgba(188,151,247,.065);
}
#s3 .product-decision-meaning > span { display:none; }
#s3.product-design-stage .product-decision-meaning > div {
  display:block;
  transform:none;
}
#s3.product-design-stage .product-decision-meaning small {
  display:block;
  min-width:0;
  margin:0 0 6px;
  color:#d9c2fb;
  font-size:16px;
  font-weight:500;
  line-height:1.4;
}
#s3.product-design-stage .product-decision-meaning p {
  margin:0;
  color:#e3dbea;
  font-size:16px;
  font-weight:350;
  line-height:1.6;
}

@media (min-width:901px) and (max-width:1100px) {
  #s3.product-design-stage .product-decision-head { padding-left:18px; padding-right:18px; }
  #s3.product-design-stage .product-decision-rationale { min-height:94px; padding-left:18px; padding-right:18px; }
  #s3.product-design-stage .product-decision-tracks,
  #s3.product-design-stage .product-decision-meaning { padding-left:18px; padding-right:18px; }
}
@media (max-width:900px) {
  #s3.product-design-stage .product-design-deck { grid-template-columns:1fr; width:min(480px,100%); gap:28px; }
  #s3.product-design-stage .product-decision-rationale { min-height:0; }
  #s3.product-design-stage .product-decision-tracks { grid-template-rows:auto auto; }
  #s3.product-design-stage .product-decision-meaning { min-height:0; }
}
@media (max-width:480px) {
  #s3.product-design-stage .product-design-pin { padding-left:18px; padding-right:18px; }
  #s3.product-design-stage .product-decision-head,
  #s3.product-design-stage .product-decision-rationale,
  #s3.product-design-stage .product-decision-tracks,
  #s3.product-design-stage .product-decision-meaning { padding-left:20px; padding-right:20px; }
}
@media (prefers-reduced-motion:reduce) {
  #s3.product-design-stage .product-design-stage-title.is-copy-prepared > span,
  #s3 .product-heading-title-char,
  #s3 .product-heading-subtitle-char,
  #s4.development-design-stage .product-design-stage-title.is-copy-prepared > span,
  #s4 .product-heading-title-char,
  #s4 .product-heading-subtitle-char {
    opacity:1;
    filter:none;
    transform:none;
    transition:none;
  }
}
