/* Clear actions, readable labels, and restrained feedback. */
.button {
  min-height: 52px;
  padding: 16px 24px;
  border: 1px solid #b4ccff;
  border-radius: 12px;
  background: linear-gradient(115deg, #d3e2ff, #94b9ff 65%, #7aa6fc);
  color: #07152e;
  box-shadow: inset 0 1px 0 #ffffff70, 0 6px 22px #3268d022;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.button img { width: 24px; height: 24px; object-fit: contain; }
.button > span[aria-hidden="true"] { transition: transform 180ms ease; }
.header .small-cta { min-height: 48px; padding: 12px 17px; font-size: 16px; }
.hero .hero-cta, .join-section .button { font-size: 16px; }
.button:active { transform: translateY(1px); box-shadow: inset 0 1px 0 #ffffff50; }

.button:focus-visible {
  outline: 3px solid #eff5ff;
  outline-offset: 5px;
  box-shadow: 0 0 0 8px #183b6d;
}

.button:disabled, .button[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  filter: none;
  box-shadow: none;
}

.text-link, .hero-secondary, .event-note > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 12px;
  color: #c9dcff;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  text-underline-offset: 5px;
  transition: color 180ms ease, border-color 180ms ease;
}
.text-link span, .event-note > a span { margin-left: 0; }
.testimonial-caption a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid #405777;
  border-radius: 8px;
  color: #d6e5ff;
  font-size: 16px;
  line-height: 1.4;
  transition: background-color 180ms ease, border-color 180ms ease;
}

.video-load { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.video-play, .workshop-play .video-play {
  color: #07152e;
  background: #bfd5ff;
  border-color: #e1ebff;
  box-shadow: 0 4px 24px #0008;
  transition: background-color 180ms ease, box-shadow 180ms ease;
}
.video-load:focus-visible { outline: 3px solid #eff5ff; outline-offset: -6px; }
.video-load:focus-visible .video-play { box-shadow: 0 0 0 5px #153768, 0 0 0 8px #eff5ff; }
.video-load-label { font-size: 16px; letter-spacing: .6px; }
.watch-label { font-size: 16px; letter-spacing: .4px; }

@media (hover: hover) and (pointer: fine) {
  .button:hover:not(:disabled):not([aria-disabled="true"]) {
    filter: none;
    transform: translateY(-2px);
    border-color: #edf4ff;
    box-shadow: inset 0 1px 0 #ffffff70, 0 10px 30px #467deb35;
  }
  .button:hover > span[aria-hidden="true"] { transform: translate(2px, -2px); }
  .text-link:hover, .hero-secondary:hover, .event-note > a:hover { color: #fff; border-color: #bed4ff; }
  .testimonial-caption a:hover { background: #192e49; border-color: #86ace3; }
  .video-load:hover .video-play { background: #e0eaff; box-shadow: 0 4px 32px #0008; }
}

@media (hover: none) {
  .button:hover { filter: none; transform: none; }
}

@media (max-width: 700px) {
  .header .small-cta { font-size: 16px; max-width: 215px; gap: 8px; padding: 10px 12px; }
  .header .small-cta img { width: 21px; height: 21px; }
  .hero .hero-cta, .join-section .button { font-size: 16px; padding: 16px; min-height: 54px; }
  .hero-secondary { font-size: 16px; }
  .workshop-play .video-play { width: 58px; height: 58px; font-size: 20px; }
  .watch-label { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .button, .button > span[aria-hidden="true"], .text-link, .hero-secondary,
  .event-note > a, .testimonial-caption a, .video-play { transition: none; }
  .button:hover, .button:active, .button:hover > span[aria-hidden="true"] { transform: none !important; }
}

/* Player loading/fallback actions share the same accessible control language. */
.video-reset, .video-retry, .video-fallback {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid #779bcf;
  border-radius: 8px;
  background: #11253f;
  color: #e2edff;
  font: 500 16px/1.4 Inter, Arial, sans-serif;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
}
.video-reset:focus-visible, .video-retry:focus-visible, .video-fallback:focus-visible {
  outline: 3px solid #eff5ff;
  outline-offset: 4px;
}
@media (hover: hover) and (pointer: fine) {
  .video-reset:hover, .video-retry:hover, .video-fallback:hover { background: #203f64; }
}