/* The page scroll drives this section without capturing wheel or touch input. */
.application-start { height: 0; }
.application-pin { padding-bottom: 30px; }
.application-scroll-guide { display: none; }
.js .applications { padding-bottom: 0; }
.js .application-pin {
  --app-sticky-top: 76px;
  position: sticky;
  top: min(var(--app-sticky-top), calc(100svh - var(--app-pin-height, 700px)));
  min-height: calc(100svh - var(--app-sticky-top));
  display: flex;
  flex-direction: column;
  padding-top: 20px;
  background: #e7e8e0;
}
.js .application-panel {
  flex: 1;
  min-height: 470px;
  margin-bottom: 20px;
}
.application-tabs button { position: relative; }
.js .application-tabs button { border-bottom-color: transparent; }
.js .application-tabs button::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  height: 3px;
  width: 100%;
  background: #526a3b;
  transform: scaleX(var(--step-progress, 0));
  transform-origin: left;
}
.js .application-tabs button[aria-selected='true'] { color: #192117; }
.js .application-scroll-guide {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 22px 0 5px;
  border-top: 1px solid #20271e30;
}
#application-count { font-size: 17px; font-weight: 500; white-space: nowrap; }
#application-count > span { color: #5e675b; margin-left: 5px; }
#application-scroll-hint { font-size: 14px; line-height: 1.6; color: #4c5c41; }
#application-scroll-hint > span { margin-left: 12px; }
#application-scroll-hint > .application-hint-full,
#application-scroll-hint > .application-hint-short { margin-left: 0; }
.application-hint-short { display: none; }
.application-progress { height: 2px; width: 150px; background: #20271e20; margin-left: auto; }
.application-progress i {
  display: block;
  height: 100%;
  background: #526a3b;
  transform: scaleX(var(--application-progress, 0));
  transform-origin: left;
}
.js .applications .app-description h3 { min-height: 99px; }
.js .applications .app-description p { min-height: 122px; }
@media (max-width: 760px) {
  .js .application-pin { --app-sticky-top: 70px; padding-top: 8px; padding-bottom: 22px; }
  .js .application-tabs button { min-height: 57px; padding-top: 15px; padding-bottom: 15px; }
  .js .application-panel { min-height: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; padding-top: 10px; margin-bottom: 12px; }
  .js .applications .app-visual { min-height: 0; height: clamp(145px, 23svh, 200px); width: 100%; }
  .js .applications .app-visual img { height: 100%; width: 100%; }
  .js .applications .app-rings { width: 57%; }
  .js .applications .visual-label { display: none; }
  .js .applications .app-description { padding: 12px 0 0; width: 100%; }
  .js .applications .app-description > .eyebrow { display: none; }
  .js .applications .app-description h3 { min-height: 67px; font-size: 25px; line-height: 1.35; margin: 0 0 14px; }
  .js .applications .app-description p { min-height: 106px; font-size: 16px; line-height: 1.65; }
  .js .applications .app-description .text-link { margin-top: 12px; padding: 9px 0; }
  .js .application-scroll-guide { gap: 12px; padding-top: 15px; }
  #application-count { font-size: 15px; }
  #application-scroll-hint { font-size: 14px; }
  #application-scroll-hint > span { margin-left: 4px; }
  .application-hint-full { display: none; }
  .application-hint-short { display: inline; }
  .application-progress { display: none; }
}