/* Latest ulTrain app screenshot showcase. Uses individual image files for sharp local and hosted previews. */
.shot-image {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 9 / 19.5;
  object-fit: cover;
  object-position: center top;
  border-radius: 28px;
  background: #142033;
}

.screenshot-showcase {
  background: linear-gradient(180deg, #ffffff 0%, var(--off-white) 100%);
  padding: 112px 5%;
  overflow: hidden;
}
.screenshot-showcase .section-sub { max-width: 760px; }
.screenshot-grid {
  max-width: 1180px;
  margin: 58px auto 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
}
.screenshot-card {
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(26,36,51,0.08);
  border-radius: 28px;
  padding: 12px;
  box-shadow: 0 24px 70px rgba(26,36,51,0.09);
  transition: transform 0.24s ease, box-shadow 0.24s ease;
}
.screenshot-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 34px 90px rgba(26,36,51,0.14);
}
.screenshot-device {
  padding: 8px;
  border-radius: 30px;
  background: linear-gradient(145deg, #1e2d3d 0%, #0d1825 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
  overflow: hidden;
}
.screenshot-device .shot-image {
  border-radius: 23px;
}
.screenshot-card h3 {
  margin-top: 15px;
  color: var(--text-dark);
  font-size: 0.98rem;
  letter-spacing: -0.02em;
}
.screenshot-card p {
  margin-top: 6px;
  color: var(--text-gray);
  font-size: 0.84rem;
  line-height: 1.5;
}
.feature-stack {
  background: var(--off-white);
  padding: 112px 5%;
  overflow: hidden;
}
.feature-stack-grid {
  max-width: 1180px;
  margin: 52px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.feature-panel {
  background: white;
  border: 1px solid rgba(26,36,51,0.07);
  border-radius: 28px;
  padding: 28px;
  box-shadow: 0 22px 65px rgba(26,36,51,0.07);
}
a.feature-panel {
  display: block;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
a.feature-panel:hover {
  transform: translateY(-4px);
  border-color: rgba(230,126,34,0.22);
  box-shadow: 0 32px 78px rgba(26,36,51,0.12);
}
.feature-panel .overview-icon { margin-bottom: 18px; }
.feature-panel h3 {
  color: var(--text-dark);
  font-size: 1.22rem;
  letter-spacing: -0.03em;
}
.feature-panel p {
  color: var(--text-gray);
  line-height: 1.62;
  margin-top: 10px;
}
.mode-visual .phone-frame.phone-real-shot {
  width: min(260px, 72vw);
  animation: none;
}
.mode-visual .phone-frame.phone-real-shot .phone-screen,
.hero-device .phone-frame .phone-screen {
  aspect-ratio: 9 / 19.5;
  background: #142033;
  padding: 0;
  overflow: hidden;
}
.mode-visual .phone-frame.phone-real-shot .shot-image,
.hero-device .phone-frame .shot-image {
  height: 100%;
  border-radius: 28px;
}
.hero-device .phone-frame { width: min(250px, 72vw); }
#pricing .pricing-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
  gap: 28px;
  align-items: stretch;
}
#pricing .subscription-card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 30px;
  padding: 30px;
  box-shadow: 0 28px 85px rgba(0,0,0,0.22);
}
#pricing .price-option {
  border-radius: 22px;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}
#pricing .price-option.monthly { background: white; color: var(--text-dark); }
#pricing .price-option.yearly {
  background: linear-gradient(135deg, var(--orange), #d35400);
  color: white;
  box-shadow: 0 16px 45px rgba(230,126,34,0.35);
}
#pricing .pro-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

/* Emoji-style icons with warm ulTrain chips and muted grey glyphs. */
.overview-icon,
.mode-icon,
.mode-feature-icon,
.pp-icon,
.privacy-shield,
.ai-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(230, 126, 34, 0.13);
  border: 1px solid rgba(230, 126, 34, 0.26);
  color: #5f6874;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.58), 0 10px 26px rgba(230,126,34,0.10);
  filter: none;
}
.overview-icon,
.mode-icon,
.privacy-shield,
.ai-avatar {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  font-size: 1.35rem;
}
.mode-feature-icon,
.pp-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  font-size: 1.05rem;
}
.icon-glyph {
  display: inline-block;
  line-height: 1;
  filter: grayscale(1) saturate(0) brightness(0.72) contrast(1.08);
  opacity: 0.94;
}
.mode-section.dark .mode-feature-icon,
#pricing .mode-feature-icon,
.privacy-section .pp-icon,
.coach-card-refresh .ai-avatar {
  background: rgba(230, 126, 34, 0.18);
  border: 1px solid rgba(230, 126, 34, 0.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 12px 30px rgba(230,126,34,0.14);
  filter: none;
}
.mode-section.dark .icon-glyph,
#pricing .icon-glyph,
.privacy-section .icon-glyph,
.coach-card-refresh .icon-glyph {
  filter: grayscale(1) saturate(0) brightness(1.08) contrast(1.04);
  opacity: 0.9;
}
.overview-card .overview-icon,
.feature-panel .overview-icon {
  margin-bottom: 16px;
}

/* Stronger contrast for the training mode cards. */
.mode-switch-grid .training-mode-card {
  border-radius: 28px;
  border: 1px solid rgba(26, 36, 51, 0.10);
  box-shadow: 0 24px 60px rgba(26, 36, 51, 0.08);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.mode-switch-grid .training-mode-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 34px 80px rgba(26, 36, 51, 0.12);
  border-color: rgba(26, 36, 51, 0.16);
}
.mode-switch-grid .training-mode-card:first-child,
.mode-switch-grid .training-mode-card:last-child {
  background: linear-gradient(180deg, #fff7f1 0%, #f8eadc 100%);
  border-color: rgba(230, 126, 34, 0.22);
  box-shadow: 0 26px 70px rgba(230, 126, 34, 0.11);
}
.mode-switch-grid .training-mode-card:first-child h3,
.mode-switch-grid .training-mode-card:last-child h3 {
  color: var(--text-dark);
}
.mode-switch-grid .training-mode-card:first-child p,
.mode-switch-grid .training-mode-card:last-child p {
  color: var(--text-gray);
}
.mode-switch-grid .training-mode-card:first-child .mode-icon,
.mode-switch-grid .training-mode-card:last-child .mode-icon {
  background: rgba(230, 126, 34, 0.16);
  border: 1px solid rgba(230, 126, 34, 0.30);
}

@media (max-width: 1120px) {
  .screenshot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feature-stack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .screenshot-showcase, .feature-stack { padding: 86px 5%; }
  .screenshot-grid,
  .feature-stack-grid,
  #pricing .pricing-layout,
  #pricing .pro-feature-grid { grid-template-columns: 1fr; }
  .screenshot-card {
    max-width: 240px;
    width: 100%;
    margin: 0 auto;
  }
  .mode-visual .phone-frame.phone-real-shot,
  .hero-device .phone-frame { max-width: calc(100vw - 44px); }
}