/* One continuous surface for the solution overview and its guided demonstration. */
.solution-tabs{flex-wrap:nowrap;overflow-x:auto}
.solution-tabs>[role="tab"]{flex:0 0 auto;white-space:nowrap}
.solution-app-link{display:flex;align-items:center;gap:14px;width:fit-content;max-width:calc(100% - 2 * var(--solution-inset));margin:0 var(--solution-inset) 24px;color:#087fa8;font-size:15px;font-weight:600;line-height:1.5;text-decoration:none}
.solution-app-link span{font-size:24px}
.solution-app-link:hover{text-decoration:underline;text-underline-offset:5px}
.solution-app-link[hidden]{display:none}
#solution-panel {
  --solution-inset: 32px;
  display: block;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #c7dbe6;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff 0%, #f8fbfd 38%, #eff6f9 100%);
}

#solution-panel > .solution-copy {
  padding: 30px var(--solution-inset) 26px;
  column-gap: 56px;
}

#solution-panel .solution-copy > .pill {
  padding: 0;
  background: transparent;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .07em;
  margin-bottom: 14px;
}

#solution-panel .solution-copy > h3 {
  font-size: clamp(28px, 2.8vw, 36px);
  line-height: 1.16;
}

#solution-panel .solution-copy > p {
  font-size: 16px;
  line-height: 1.8;
}

#solution-panel .solution-copy > .check-list {
  font-size: 14px;
  line-height: 1.7;
  grid-row: 3;
  margin: 12px 0 0;
}


#solution-panel > .planning-animation-inline {
  border: 0;
  border-radius: 0;
  background: transparent;
}

#solution-panel .pd-header {
  margin-inline: var(--solution-inset);
  padding: 22px 0 0;
  border: 0;
  border-top: 1px solid #d4e4ed;
  background: transparent;
}

/* Planning and measurement-record controls sit above their demonstration heading. */
#planning-animation-panel .pd-header,
#solution-animation-panel[data-solution="registro"] .pd-header {
  display: block;
}

#solution-panel #planning-animation-panel .pd-header .pd-controls,
#solution-panel #solution-animation-panel[data-solution="registro"] .pd-header .pd-controls {
  padding: 0 0 16px;
  border: 0;
  justify-content: flex-end;
}

#planning-animation-panel .pd-header .animation-phases,
#solution-animation-panel[data-solution="registro"] .pd-header .animation-phases {
  justify-content: flex-end;
}

#planning-animation-panel .pd-header .pd-playback,
#solution-animation-panel[data-solution="registro"] .pd-header .pd-playback {
  margin-left: 0;
}

#planning-animation-panel .pd-header .pd-timeline,
#solution-animation-panel[data-solution="registro"] .pd-header .pd-timeline {
  margin-bottom: 18px;
  border-radius: 2px;
  overflow: hidden;
}

#solution-panel .pd-header .eyebrow {
  font-size: 12px;
  margin-bottom: 9px;
}

#solution-panel .pd-header h2 {
  font-size: clamp(20px, 2vw, 25px);
  line-height: 1.25;
  margin-bottom: 7px;
}

#solution-panel .pd-header p {
  font-size: 14px;
  line-height: 1.7;
}

#solution-panel .pd-layout {
  padding: 26px var(--solution-inset) 24px;
}

#solution-panel .pd-story h3 {
  font-size: clamp(23px, 2.2vw, 29px);
  line-height: 1.2;
}

#solution-panel .pd-controls {
  padding-inline: var(--solution-inset);
  background: transparent;
}

@media (max-width: 1000px) {
  #solution-panel { --solution-inset: 24px; }
  #solution-panel > .solution-copy { column-gap: 30px; }
}

@media (max-width: 700px) {
  #solution-panel { --solution-inset: 20px; border-radius: 10px; }
  #solution-panel > .solution-copy { padding-block: 24px; }
  #solution-panel .solution-copy > h3 { font-size: 29px; margin-bottom: 18px; }
  #solution-panel .solution-copy > .pill { font-size: 12px; }
  #solution-panel .solution-copy > .check-list { margin: 18px 0; font-size: 14px; }
  #solution-panel .pd-header { padding-top: 20px; }
  #solution-panel .pd-header .eyebrow { font-size: 12px; }
  #solution-panel .pd-header h2 { font-size: 21px; }
  #solution-panel .pd-header p { font-size: 14px; }
  #solution-panel .pd-layout { gap: 24px; padding-block: 22px; }
  #solution-panel .pd-story h3 { font-size: 24px; }
}