/* === Base button (single use) === */
a.btn{
  display: flex;                   /* allows perfect centering */
  align-items: center;
  justify-content: center;

  width: min(260px, 92vw);         /* nice centered single button */
  height: 48px;                    /* fixed height */
  padding: 0 16px;
  margin: 1rem auto;               /* center when used alone */

  background: #384646;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;             /* keep to one line */
}
a.btn:hover,
a.btn:focus{
  background:#2f3a3a;              /* subtle darken */
  color:#fff;
  text-decoration:none;
}

/* === Two-button row (desktop: left & right; mobile: stacked) === */
.btn-row{
  display: flex;
  justify-content: space-between;  /* puts one flush left, one flush right */
  align-items: center;
  gap: 16px;
  margin-top: 1rem;
}

/* Override the single-button centering inside the row */
.btn-row .btn{
  margin: 0;                       /* cancel auto-centering */
  width: 260px;                    /* fixed width per button */
  height: 48px;                    /* keep same height */
  flex: 0 0 auto;                  /* don't use flex-basis (prevents tall stack on mobile) */
}

/* Mobile: stack full-width without getting tall */
@media (max-width: 740px){
  .btn-row{
    flex-direction: column;
    align-items: stretch;
  }
  .btn-row .btn{
    width: 100%;
  }
}

/* video embed */

.video-embed{width:100%;max-width:640px;margin:1.5rem auto}
.video-embed .frame{position:relative;aspect-ratio:16/9}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.text-center { text-align: center; }